vue1.0与vue2.0区别之组件通信

vue1.0与2.0版本在组件通信那方面也有些不同。比如在vue1.0版本中，父组件想要传递信息给子组件的话有两种方法：一种是利用props方法，该方法是通过子组件中绑定了一个属性，这个属性的值等于父组件的值，然后将该值传给props，这样子组件就能获得父组件的值。实例代码如下所示：<template id="child">    <div>        <span>我是子组件</span>        <strong>{{msg}}</strong>    </div></template><div id="box">    父级: ->{{a}}    <br>    <child-com :msg="a"></child-com></div><script>    window.onload=function(){        new Vue({            el:'#box',            data:{                a:'我是父组件数据'            },            components:{                'child-com':{                    props:['msg'],                    template:'#child',                }            }        });    };</script>另一种方法是用$broadcast()，但是由于在vue2.0版本中已经取消掉，所以不推荐使用。他的作用是向所有子组件广播父组件的信息，当返回值为false时则停止。vue1.0中父组件接收子组件的数据也有两种方法。一种是子组件调用$emit和父组件用v-on监听子组件的变化，进而获取数据，这个方法用的比较多，代码如下：<div id="box">    <parent>    </parent></div><template id="aaa">    <span>我是父级 -> {{msg}}</span>    <child @child-msg="get"></child></template><template id="bbb">    <h3>子组件-</h3>    <input type="button" value="send" @click="send"></template><script>    var vm=new Vue({        el:'#box',        data:{            a:'aaa'        },        components:{            'parent':{                data(){                    return {                        msg:111,                        msg2:'我是父组件的数据'                    }                },                template:'#aaa',                methods:{                    get(msg){                        // alert(msg);                        this.msg=msg;                    }                },                components:{                    'child':{                        data(){                            return {                                a:'我是子组件的数据'                            }                        },                        template:'#bbb',                        methods:{                            send(){                                this.$emit('child-msg',this.a);                            }                        }                    }                }            }        }    });</script>第二钟方法是子组件利用$dispatch()来向父组件传递数据，但是在vue2.0中，这种方法也已经被舍弃，故不推荐使用。那么在vue的2.0版本中，组件的通信有什么不同呢，首先上面的这两个方法都是可以的，只不过要改一下一些地方。因为在vue2.0版本中，模板<template>中必须有一个根标签包裹所有的标签，所以上面的代码在<template>中需要把里面的标签包在一个div或者别的根元素中才能使用。既然上面的这两个方法在2.0版本中没什么差别，那么我现在来讲一下在2.0版本中如何用脚手架来实现父子组件通信甚至是非父子组件通信。首先是父传子。父传子和上面的思想差不多，代码实例如下，首先是子组件(c.vue)：<template><div>    <div id="myc">我是c组件,        <span>父组件内容是-->{{cc}}</span>    </div></div></template><script>export default{    props:["cc"]}</script>

然后是父组件(App.vue)：

<template>  <div id="app">    <com-c :cc="c"></com-c>  </div></template><script>import C from './components/c.vue'export default {  name: 'app',  components:{    'com-c':C  },  data(){    return{      c:'hahaha'    }  }}</script>或者也可以这样写：<template>  <div id="app">    <com-c cc="haha"></com-c>  </div></template>这样下面的script就可以不用data{}了。然后另一个就是子传父。子传父的话要清楚的知道你想要在哪个模块操作，是在App.vue那里还是在main.js那里，博主本人也被这个东西搞蒙圈了很久，现在终于明白了怎么做，话不多说，直接上代码：父组件的代码（App.vue）:<template>  <div id="app">    <com-a v-on:a-msg="aa"></com-a>    <com-b v-on:b-msg="bb"></com-b>    <div>      <span>it is a-->{{a}}</span><br>      <span>it is b-->{{b}}</span>    </div>  </div></template><script>import A from './components/a.vue'import B from './components/b.vue'export default {  name: 'app',  components:{    'com-a':A,    'com-b':B  },  data(){    return{      a:'',      b:''    }  },  methods:{    aa(msg){      this.a=msg    },    bb(msg){      this.b=msg    }  }}</script>a.vue的代码如下所示：<template><div>    <h3>我是a组件--->{{a}}</h3>    <input type="button" v-on:click="send" value="AToC" /></div></template><script>    export default{        data(){            return{                a:"我是a"            }        },        methods:{            send(){                this.$emit('a-msg',this.a)            }        }    }</script>b.vue的代码如下所示：<template><div>    <h3>我是b组件--->{{b}}</h3>    <input type="button" v-on:click="send" value="BToC" /></div></template><script>    export default{        data(){            return{                b:"我是b"            }        },        methods:{            send(){                this.$emit('b-msg',this.b)            }        }    }</script>下面一个demo是关于父传子和子传父的综合应用，本demo是模拟一个群发信息，当用户点击一个发送按钮，会将他的话发送出去。代码如下所示：父组件（App.vue）:<template>  <div id="app">    <p>群消息：</p>    <div>      {{somebody}}说：{{text}}    </div>    <hr>    <com :people="aGirls" :current="current" @introduce="introduceSelf" ></com>  </div></template><script>import children from './components/children.vue'export default {  name: 'app',  components:{    'com':children  },  data(){    return{      aGirls:[{        name:'haha',        text:'我是haha'      },{        name:'hoho',        text:'我是hoho'      },{        name:'hehe',        text:'我是hehe'      }],      somebody:'',      text:'',      current:''    }  },  methods:{    introduceSelf(opt){      this.somebody=opt.name;      this.text=opt.text;      this.current=opt.name+',已收到信息';    }  }}</script>子组件（children.vue）：<template><div>    <ul>        <li v-for="(value,index) in people">            {{index}} - {{value.name}} - {{value.text}}            <button @click="noticeGroup(value.name,value.text)" >发送</button>        </li>    </ul>    <div>接收到大群的信息{{current}}</div></div></template><script>    export default{        props:{            people:{                type:Array,                required:true            },            current:{                type:String,                required:false            }        },        methods:{            noticeGroup(name,text){                this.$emit('introduce',{                    name:name,                    text:text                })            }        }    }</script>