Vue基础4-组件及refs用法

组件

　　组件是可复用的 Vue 实例，且带有一个名字，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。组件将css、js、html封装到一起。直接引用使用。

　　全局组件

<div id="app">
    <demo></demo>
    <demo></demo>
    <demo></demo>
</div>

//全局组件
    Vue.component('demo',{
        template:'<h1 @click="change">{{msg}}</h1>',
        //组件中data必须是方法 return属性值
        data:function () {
            return {
                msg:'msg'
            }
        },
        methods:{
            change:function () {
                this.msg = 'test'
            }
        }
    });
    new Vue({
        el:'#app'
    })

组件中的data属性必须是一个函数，这样可以根据作用域将每个组件的数据进行隔离，不会出现多组件复用，数据相同的问题。

组件中的props属性可以接收组件在引用时传递的变量

组件中的template，模板属性

父组件：vue实例化接管的div 就是父组件

子组件：在父组件即app 这个div标签内部引用了全局组件中定义的组件，即为子组件

refs用法：通过给标签定义ref属性

<div id="app">
    <div ref="test">ref=test</div>
    <input type="button" value="test" @click="change">
</div>

new Vue({
        el:'#app',
        data:{
        },
        methods:{
            change:function () {
                this.$refs.innerText = '已被修改'
            }
        }
    })

refs类似与dom操作的document.getElementByID的操作，可以获取到元素的属性（能获取就能修改），但是由于Vue中都是对于data数据进行操作，一般用来和组件一起使用

运用的例子：两个子组件和一个父组件，点击子组件的数字，子组件数字自增1，点击修改button实现点击两个子组件数字相加

<div id="app">
    <test ref="a"></test>
    <test ref="b"></test>
    //父组件只能使用父组件的data.count属性
    <div>父组件--<span>{{count}}</span></div>
    <input type="button"  value="test" @click="change">
</div>

//全局组件
    Vue.component('test',{
        template:'<div>子组件--<span @click="add">{{number}}</span></div>',
        data:function () {
            return{
                number:0
            }
        },
        methods:{
            add:function () {
                this.number++
            }
        }
    });
    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            change:function () {
                this.count = this.$refs.a.number +this.$refs.b.number;
            }
        }
    })

父子组件交互（子组件触发父组件）

　　实现一个例子：两个子组件一个父组件，点击子组件数字，子组件数字自增1，子组件每次变化，父组件的数字都自动将两个子组件数字相加，即子组件变化自动触发父组件 

<div id="app">
    <demo @xxxx="addCount"></demo>
    <demo @xxxx="addCount"></demo>
    <div>父组件--<span>{{count}}</span></div>
</div>
<script src="../js/vue.js"></script>
<script>
    Vue.component('demo',{
        template:'<div>子组件---<span @click="add">{{num}}</span></div>',
        data:function () {
            return{
                num:0
            }
        },
        methods:{
            add:function () {
                this.num++;
                //子组件向父组件触发xxxx事件,且可以向父组件传递多个子组件参数
                this.$emit('xxxx',this.num)
            }
        }
    });
    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            addCount:function (num) {
                this.count += num
            }
        }
    })
</script>