Vue組件間的通訊

1.父組件到子組件通訊

經過props屬性來傳遞

/*------HTML-----*/
<div id="app">
    <Parent></Parent>
</div>

/*------javascript----- */
//註冊全局組件（子組件）
Vue.component('Child',{
    template:'<div>我是子組件,看後面->{{message}}</div>',
    props:['message'],  //註冊子組件的props自定義屬性，而且綁定到組件內
});
// 註冊全局組件（父組件)
Vue.component('Parent',{
    template:`<div>
        我是父組件
        <Child :message="ParentMessage"></Child>  
        //經過message這個props自定義屬性將值傳入子組件
    </div>`,
    data:function(){
        return {
            ParentMessage:'我是父組件傳過來的消息'
        }
    },
});
var app = new Vue({
    el:'#app',
});

2.子組件到父組件通訊

經過Vue.$emit()方法

/*------HTML-----*/
<div id="app1">
    <Parent1></Parent1>
</div>
/*------javascript----- */
// 註冊全局組件（子）
Vue.component('Child1',{
    template:'<div @click="call">我是子組件，點擊我父組件的字會變色</div>',
    methods:{
        call:function(){
            this.$emit('change','#f00');  
            //經過$emit()將事件觸發接口暴露出去,參數二是要傳遞出去的參數
        }
    },
})

// 註冊全局組件（父）
Vue.component('Parent1',{
    template:`<div>
        <span :style="style">我是父組件</span>
        <Child1 @change="changeColor"></Child1> 
    </div>`,
    //經過監聽change事件來觸父組件中的changeColor事件，從而實現子到父的通訊
    data:function(){
        return{
            style:{
                color:'#000',
            }
        }
    },
    methods:{
        changeColor:function(red){ //接子組件傳過來的參數
            this.style = {
                color:red,
            }
        }
    },
});

//掛載節點
var app1 = new Vue({
    el:'#app1',
});

3.同級組件間的通訊

/*------HTML-----*/
<div id="app2">
    <Child2 @change1="change2"></Child2>
    <!-- 3.在掛載節點監聽change1事件，觸發change2事件 -->
    <Child3 :change3="change3"></Child3>
    <!-- 5.經過change3這個props中定義的自定義屬性將，值傳入Child3組件中 -->
</div>
/*------javascript----- */
Vue.component('Child2',{
    template:'<div @click="change">我是兄弟組件2</div>',
    //1.綁定change事件到click事件上
    methods:{
        change:function(){
            this.$emit('change1');
            //2.暴露接口出去，到外部調用
        }
    },
});

Vue.component('Child3',{
    // 6.值傳到這裏改變了child3的樣式，變爲紅色，實現了兄弟組件間的通訊
    template:'<div :style="{color:change3}">我是兄弟組件3</div>',
    props:['change3'],
});

// 掛載節點
var app2 = new Vue({
    el:'#app2',
    data(){
        return{
            change3:'#000',
        }
    },
    methods:{
        change2:function(){
            this.change3 = '#f00'
            // 4.修改掛載節點下的change3的值
        }
    },
})