Vue2.0 组件通信

1.父组件与子组件之间通信

HTML：

<div id="app">
    <ul>
        <!--v-bind:title是Vue实例中通过props传过来的数据-->
        <my-component v-for="item in items"
                      v-bind:title="item.title"
                      v-bind:key="item.id"></my-component>
    </ul>
</div>

JS：

    var vm=new Vue();  //首先实例化一个Vue对象

    var a={
        //定义组件模板
        template: '<li>'+
        '{{title}} + {{message}}'+        //title是props传递过来的数据，message是子组件自身的数据
        '</li>',
        props:['title'],        //必须，因为组件有作用域，需要用这个方法把data中的数据传递到组件中
        data:function(){
            return {
                message:"我是a自身的数据"  //这是组件自身的数据
            }
        }
    };

    new Vue({
        el:"#app",
        data:{
            //这是要传递到子组件中的数据
            items:[     
                {title:"我是父组件中的数据1",id:1},
                {title:"我是父组件中的数据2",id:2},
                {title:"我是父组件中的数据3",id:3}
            ]
        },
        components:{
            "my-component":a  //注册a组件
        }
    });

运行结果：

父子组件之间的传值，主要通过在子组件中使用Props来获取父组件data的数据

2.非父子组件之间的通信

非父子组件之间的传值，可以使用eventBus来监听组件事件进行组件之间传值，这里我用一个更完整的例子来实现兄弟组件之间传值并动态为属性赋值来复习Vue.set()

方法API：vm.$emit
                vm.$on

直接上例子：

HTML：

<div id="app">
    <p style="font-size:20px;font-weight:bold;">组件A：</p>
    <ul>
        <!--v-bind:title是Vue实例中通过props传过来的数据-->
        <my-component v-for="item in items"
                      v-bind:title="item.title"
                      v-bind:key="item.id"></my-component>
    </ul>

    <p style="font-size:20px;font-weight:bold;">组件B：</p>
    <my-component2></my-component2>
</div>

JS：

    //首先实例化一个Vue对象
    var vm=new Vue(); 

    //组件A
    var a={
        //当点击li时，执行sendMessage()，触发钩子
        template: '<li @click="sendMessage($event)">'+
        '{{title}} + {{message}}'+        //title是props传递过来的数据，message是组件A自身的数据
        '</li>',
        props:['title'],        //必须，因为组件有作用域，需要用这个方法把data中的数据传递到组件中
        data:function(){
            return {
                message:"我是a自身的数据"  
            }
        },
        methods:{
            //sendMessage()执行时获取当前事件发生的DOM对象，并触发钩子，通过$emit将当前点击DOM对象的文字内容传给监听器回调
            sendMessage:function(e){
                var el= e.target;
                         //事件对象     传给监听器的内容
                vm.$emit("sendMessage",el.innerText);
            }
        }
    };

    //组件B
    var b={
        template:'<div><p v-for="item in dataArray" :key="item.id" v-bind:message="item.message" v-bind:id="item.id" >{{item.message}}</p></div>',
        data:function(){
                return {
                    dataArray:[
                        {
                            message:"我是b组件的数据1",
                            id:1
                        },
                        {
                            message:"我是b组件的数据2",
                            id:1
                        }
                    ]
                }
            },
        //钩子函数
        mounted:function(){
            var _this=this;

            //$on监听器，接收$emit传过来的参数
            //      监听中的方法   
            vm.$on("sendMessage",function(data){//data是$emit传过来的参数

                var addData={message:data,id:_this.dataArray.length};

                //this指向的是vm的实例，所以此处使用_this指向组件B(组件存在自己的作用域)
                _this.$set(_this.dataArray,_this.dataArray.length,addData);
            });
        }
    };
    new Vue({
        el:"#app",
        data:{
            items:[     //这是要传递到组件中的数据
                {title:"我是父组件中的数据1",id:1},
                {title:"我是父组件中的数据2",id:2},
                {title:"我是父组件中的数据3",id:3}
            ]
        },
        components:{
            //注册组件
            "my-component":a,
            "my-component2":b
        }
    });

初始化页面：

点击组件A的li，将点击的文字传到组件B中：

eventBus在简单的单个页面中使用是不错的选择，但是如果在大型的应用中则需要使用状态管理Vuex实现模块化开发