Vue.js的其中一個重要特性就是將一個網頁切割成多個子元件來方便維護管理，但子元件和子元件間的資訊溝通，除了靠傳統的props來傳至上層再傳給另一個子元件的方式外，還有一個更簡便的方法，就是透過另一個Vue的實例來管理，此方法適合子元件相互溝通觸發的機會不多的情況時，非常適合。反之可能還是要乖乖的學習Vuex了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<com-a></com-a>
<com-b></com-b>
</div>
<script>
var bus=new Vue();
var app=new Vue({
el:'#app',
data:{
msg:'hello'
},
components:{
comA:{
template:`
<div>
<input type="text" v-model="name" />
<button @click="create">ADD</button>
`,
data(){
return {
name:'oscar'
}
},
methods:{
create(){
bus.$emit('create',{name:this.name});
this.name='';
}
}
},
comB:{
template:`
<ul>
<li v-for="i in items">
{{i.name}}
</li>
</ul>
`,
data(){
return {
items:[]
}
},
mounted(){
var that=this;
bus.$on('create',function(d){
that.items.push(d);
});
}
}
}
});
</script>
</body>
</html>
See the Pen Vue.js-使用bus來管理子元件之間的事件觸發 by oscarchang69 (@oscarchang69) on CodePen.
