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>