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