vue學習筆記(1)-組件通訊

vue.js官方教程上講的也挺清楚的了，本身整理一遍以加深印象，同時也完成本身的項目中須要的動態建立表單提交編輯修改功能。
表單主要是v-model雙向綁定實現父組件與子組件的雙向數據傳遞，因此首先說一下組件之間的通訊。

組件通訊

父組件向子組件傳值 props

// 子組件
Vue.component("my-com",{
    template:"<div>{{msg}}===={{info}}</div>",
    props:["msg"],    //必須是字符串形式
    data:function(){ 
        return {
            info:"子組件的信息"
        }
    }
});

// 使用時
<my-com :msg="message"></my-com>  // 必須使用v-bind綁定，否則傳遞的是字符串

var app=new Vue({
    el:"#app",
    data:{
        message:"父組件的內容"
    }
});
複製代碼

子組件向父組件傳遞$emit()

//邏輯是，給子組件添加事件，子組件事件觸發時，往上觸發父組件的事件，而且給事件傳值，父組件便可得到子組件的值並在事件中處理
Vue.component("my-com",{
    template:'<button type="button" @click="add">點擊+1</button>',
    data:function(){
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count++;
            this.$emit("from-son",this.count);
        }
    }
})

// 使用時
<my-com @from-son="add1"></my-com> // 觸發from-son事件，接收到子組件的數據

var app=new Vue({
    el:"#app",
    data:{
        msg:""
    },
    methods:{
        add1(value){
            this.msg=value;
        }
    }
})
複製代碼

雙向數據傳遞 v-model

由前面分析能夠看出，實現雙向綁定的話，就是同時有props傳遞，又有$emit()觸發
首先，<input v-model="text">等價於：

<input v-bind:value="text" v-on:input="text=$event.target.value">
複製代碼

所以組件要使用v-model,也須要：

<my-component
    v-bind:value="text"         //父向子傳遞
    v-on:input="text=$event.target.value"  //子向父傳遞
><my-component>
複製代碼

因此子組件必須知足：

Vue.component("my-component",{
    template:'<div @click="fn"></div>'
    props:['value'],
    methods:{
        fn(event){
            this.$emit("input",event.target.value)
        }
    }
})

複製代碼