父子组件之间的通信
第一步先创建一个子组件
Vue.component("child",{
template: `<div>我是儿子
<button @click="$emit('close')">关闭</button>
</div>`
})
接下来创建一个父组件
let app=new Vue({
el: "#app",
data: {
visible: true
}
})
<div id="app">
<child v-show="visible" @close="visible=false"></child>
</div>
子组件是否显示是由父组件的data中的visible控制的，默认设置子组件是可见的，当点击子组件的关闭按钮时隐藏子组件，但是visible是父组件的data，子组件是无法去修改值的，这时可以让子组件去触发一个我们自定义的close事件，然后在父组件上去监听这个close事件，当被触发时父组件去修改自己的visible值，就能让子组件隐藏。
父子之间的通信就是通过父组件监听事件，子组件触发事件实现的。
爷孙组件之间的通信
这次我们创建爸爸、儿子、孙子三个组件
//孙子组件
Vue.component("sunzi",{
template: `<div>我是孙子
<button @click="$emit('close')">关闭</button>
</div>`
})
//儿子组件
Vue.component("child",{
props: ["visible"],
template: `<div>我是儿子
<sunzi v-show="visible" @close="$emit('close')"></sunzi>
</div>`
})
//父组件
let app=new Vue({
el: "#app",
data: {
visible:true
}
})
<div id="app">
<child :visible="visible" @close="visible=false"></child>
</div>
父组件的data中visible控制着孙子组件的显示隐藏，通过v-bind把visible的值传入到儿子组件中，当点击孙子组件中关闭按钮时，是无法直接去触发父组件中的监听事件的，只能一级一级的往上触发，所以先去触发儿子组件监听的自定义close事件，儿子组件再去触发父组件监听的自定义close事件，父组件的事件处理再去修改visible的值，让孙子组件隐藏。
爷孙组件是无法直接进行通信的，只能通过两次的父子组件通信实现爷孙组件通信。
兄弟组件之间的通信
Vue.prototype.$eventHub=new Vue()
Vue.component("gege",{
template: `
<div>我是哥哥<button @click="helloDiDi">进行通信</button></div>
`,
methods: {
helloDiDi(){
this.$eventHub.$emit('talk','弟弟你好')
}
}
})
Vue.component("didi",{
data(){
return {
msg: "默认值"
}
},
template: `
<div>我是弟弟<p>{{msg}}</p></div>
`,
created(){
this.$eventHub.$on('talk',(msg)=>{
this.msg=msg
})
}
})
let app=new Vue({
el: "#app"
})
<div id="app">
<gege></gege>
<didi></didi>
</div>
首先在Vue原型上定义一个$eventHub变量存储一个空的Vue实例作为中央事件总线。
这里要用到的是 $emit() 和 $on() 两个方法，前者用于触发事件并发送数据，后者用于监听事件并接收数据。
兄弟组件之间通信就三点
- 新建中央事件线
- $emit 发送数据
- $on 监听并接受数据
