<div class="mas-arry">
<label for="">msg的数据:</label>{{ msg }}
</div>
<!--子组件 -->
<msg></msg>
</section>
</div>
<template id="msg">
<div class="inp">
<input type="text" v-model="msg">
<a href="javascript:;" @click="add_data">添加</a>
</div>
</template>
<script>
Vue.component('msg',{ //这里直接使用了注册组件的语法糖的方式注册，简单快捷
template: '#msg',
data: function() {
return {
msg : 'abc'
}
},
methods: {
add_data: function(){ //当点击这个事件的时候，就会触发$dispatch()方法；add_msg是父组件创建的监听子组件的方法，意思就是，告诉父组件的这个方法，老爸，我更新数据了，par_msg就是我更新的数据，你也快更新吧！把par_msg 的数据传给父组件更新！
var par_msg = this.msg.trim();
// this.$parent.add(par_msg); //此方式是直接操作父组件的方法
this.$dispatch('add_msg', par_msg); //此方法是利用事件传播的方式
this.msg = '';
}
}
});
var mvvm = new Vue({
el: '#app',
data: {
msg : ['sgsg']},
events: { // 创建监听相应响应子组件的事件
'add_msg': function(msg){ // add_msg 是用来监听子组件的方法，当接受到子组件的通知的时候，就把子组件更新的数据更新，这里的msg就是子组件的par_msg
this.msg.push(msg);
}
},
methods: {
add: function(msg){
this.msg.push(msg);
}
}
});
</script>
看完这段代码，相信大家都知道$dispatch()的冒泡的用法了，其实，就是这么点东西，里面有两个参数，第一个参数，就是父组件监听子组件events对象里面的一个方法名，两者要一致；第二个参数，就是子组件更新的数据，同时也是传递给给父组件要同步更新的数据，然后父组件就用这个参数来进行相应的操作
//$broadcast()方法的用法和$dispatch()的用法是一样的，不一样的是，event对象是在子组件里面创建，相反触发的函数在父组件；这里要说的是，如果子组件的数据完全依赖于父组件的数据，那么，则不需要用通说事件传递的方式，只需要通过props获取父组件的数据，绑定到子组件身上就可以了
<!-- 组件通讯二 $broadcast()方法 -->
<section class="sec">
<h3>父组件添加的数据源：</h3>
<div class="box clearfix">
<label for="" class="box-left">id:</label>
<div class="bor-right">
<input type="text" v-model="id">
</div>
</div>
<div class="box clearfix">
<label for="" class="box-left">姓名:</label>
<div class="bor-right">
<input type="text" v-model="name">
