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的值
        }
    },
})