//這是我的一個(gè)組件
<msg v-ref:msgs></msg> //這時(shí)候，我們就為這個(gè)msg組件建立了一個(gè)msgs的索引
//我們可以這樣訪問組件
var vm = new Vue({}); 
var children = vm.$refs.msgs //通過這種方式訪問我們的子組件
//v-ref是一個(gè)數(shù)組或?qū)ο螅俏覀兘⑺衦ef鉤子的組件的集合

//$dispatch()冒泡案例
<!-- 實(shí)例 -->
<div id="app">
<!-- 組件通訊一 -->
<section> 
<div class="mas-arry">
<label for="">msg的數(shù)據(jù):</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',{ //這里直接使用了注冊(cè)組件的語法糖的方式注冊(cè)，簡(jiǎn)單快捷
template: '#msg',
data: function() {
return {
msg : 'abc' 
}
},
methods: {
add_data: function(){ //當(dāng)點(diǎn)擊這個(gè)事件的時(shí)候，就會(huì)觸發(fā)$dispatch()方法；add_msg是父組件創(chuàng)建的監(jiān)聽子組件的方法，意思就是，告訴父組件的這個(gè)方法，老爸，我更新數(shù)據(jù)了，par_msg就是我更新的數(shù)據(jù)，你也快更新吧！把par_msg 的數(shù)據(jù)傳給父組件更新！
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: { // 創(chuàng)建監(jiān)聽相應(yīng)響應(yīng)子組件的事件
'add_msg': function(msg){ // add_msg 是用來監(jiān)聽子組件的方法，當(dāng)接受到子組件的通知的時(shí)候，就把子組件更新的數(shù)據(jù)更新，這里的msg就是子組件的par_msg
this.msg.push(msg);
}
},
methods: {
add: function(msg){
this.msg.push(msg);
}
}
});
</script>

<!-- 組件通訊二 $broadcast()方法 -->
<section class="sec">
<h3>父組件添加的數(shù)據(jù)源：</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">
</div>
</div>
<div class="box clearfix">
<label for="" class="box-left">愛好:</label>
<div class="bor-right">
<input type="text" v-model="inst">
</div>
</div>
<div class="box clearfix">
<label for="" class="box-left">&nbsp;</label>
<div class="bor-right">
<a href="javascrip:;" @click="add_table">添加</a>
</div>
</div>
<h3>下面的表格是子組件信息：</h3>
<!-- 把父組件的table_data數(shù)據(jù)綁定到子組件上 -->
<broadcase :data="table_data"></broadcase>
</section>
<template id="broadcase">
<div class="table">
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr v-for="list in data">
<td>{{ list.id }}</td>
<td>{{ list.name }}</td>
<td>{{ list.inst }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
Vue.component('broadcase',{ //這里直接使用了注冊(cè)組件的語法糖的方式注冊(cè)，簡(jiǎn)單快捷
template: '#broadcase',
props: ['data'], // props是用來接受父組件的傳遞參數(shù)，也可在里面自定義數(shù)據(jù)，如果數(shù)據(jù)需要有默認(rèn)值的話，需在data里面定義
data: function() {
return {
msg : 'abc' 
}
},
events : { //這里只是個(gè)例子，子組件監(jiān)聽父組件的數(shù)據(jù)變化
test : function(msg){
console.log(msg);
}
},
methods: {
}
});
var mvvm = new Vue({
el: '#app',
data: {
table_data: [
{
id: 1,
name: 'gjei',
inst: 'gjweir'
},{
id: 2,
name: 'jiuyer',
inst: 'oiuyt'
}
] 
},
methods: {
add_table: function(){
var set = {
id: this.id,
name: this.name,
inst : this.inst
};
this.table_data.push(set);
// this.$broadcast('test', set); //這里，只是一個(gè)例子語法
this.id = '';
this.name = '';
this.inst = '';
}
}
});
</script>