如何理解并使用vue组件

该自定义的组件添加数据/函数/计算属性,就像vue实例那样,

Vue.component('custom-button',{
    template:'<button>自定义按钮组件</button>',
    data(){
        return {numbers:[-5,0,1,2,3]}
    },
    computed:{
        positiveNumbers(){
            return this.numbers.filter((number)=>number>=0);
        }
    }
});

组件的data与vue的data有不同,组件使用的是函数返回对象,因为组件需要重复使用,这样就避免了data的共享异常.

组件中的自定义事件

组件设置 自定义事件 是为了让组件内的操作可以影响到组件外部(也就是父组件环境).主要通过两个方法实现:

• 组件上监听自定义组件事件: vue.$on('自定义事件名');
• 组件内的执行方法里执行触发事件:vue.$emit('自定义事件名');

<div id="app">
    <p>{{total}}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter> //这里监听了自定义事件increment,执行函数为incrementTotal
</div>

Vue.component('button-counter',{
    template:'<button v-on:click="incrementHandle">{{counter}}</button>', //组件上监听了click原生事件,执行函数为incrementHandle
    data(){
        return {
            counter:0
        }
    },
    methods:{
        incrementHandle(){
            this.counter++;
            this.$emit('increment'); //在这个组件内的执行函数里,触发了自定义事件.
        }
    }
});

new Vue({
    el:'#app',
    data:{
        total:0
    },
    methods:{
        incrementTotal:function(){ //这里实现具体的执行操作
            this.total++;
        }
    }
});

定义一个vue组件

const CustonButton = {
    template:'<button>自定义按钮组件</button>'
};
new Vue({
    el:'#app',
    components:{
        CustonButton
    }
});

定义一个全局的vue组件,这样就不用再vue实例里面定义components属性了

Vue.component('custom-button',{
    template:'<button>自定义按钮组件</button>'
});

使用组件

<div id="app">
    <custom-button></custom-button>
</div>

利用.sync修饰符实现双向数据绑定

通常数据通过prop从父级组件传递到子组件中,父组件中的数据发送变动时,子组件中的数据也发生更新.

<div id="app1">
    <demo-btn :number="number"></demo-btn>
</div>
new Vue({
    el:'#app1',
    data:{
        number:0
    },
    components:{
        demoBtn:{
            template:'<div>{{number}}</div>',
            props:{
                number:{type:number,required:true}
            }
        }
    }
});
//最后显示
<div id="app1">
    <div>0<div>
</div>

如果要实现双向绑定,即子组件的数据更新同时父组件也会得到更新,如何写呢?

<div id="app2">
    <div>
    <h4>这里是父组件的值:{{number}}</h4>
    <demo-btn :number.sync="number"></demo-btn>
    </div>
</div>
new Vue({
    el:'#app2',
    data:{
        number:0
    },
    components:{
        demoBtn:{
            template:'<div>子组件值:{{number}}</div>',
            props:{
                number:{type:number,required:true}
            },
            mounted(){
                setInterval(()=>{this.$emit('update:number',this.number+1)},1000);
            }
        }
    }
});