Vue组件之间的通信

父子组件之间的通信

第一步先创建一个子组件

  Vue.component("child",{
  template: `
我是儿子
    关闭
  
`
  })

接下来创建一个父组件

  let app=new Vue({
    el: "#app",
    data: {
      visible: true
    }
  })

子组件是否显示是由父组件的data中的visible控制的，默认设置子组件是可见的，当点击子组件的关闭按钮时隐藏子组件，但是visible是父组件的data，子组件是无法去修改值的，这时可以让子组件去触发一个我们自定义的close事件，然后在父组件上去监听这个close事件，当被触发时父组件去修改自己的visible值，就能让子组件隐藏。
父子之间的通信就是通过父组件监听事件，子组件触发事件实现的。

爷孙组件之间的通信

这次我们创建爸爸、儿子、孙子三个组件

  //孙子组件
  Vue.component("sunzi",{
    template: `
我是孙子
      关闭
    
`
  })
  //儿子组件
  Vue.component("child",{
    props: ["visible"],
    template: `
我是儿子
      
    
`
  })
  //父组件
  let app=new Vue({
    el: "#app",
    data: {
      visible:true
    }
  })

父组件的data中visible控制着孙子组件的显示隐藏，通过v-bind把visible的值传入到儿子组件中，当点击孙子组件中关闭按钮时，是无法直接去触发父组件中的监听事件的，只能一级一级的往上触发，所以先去触发儿子组件监听的自定义close事件，儿子组件再去触发父组件监听的自定义close事件，父组件的事件处理再去修改visible的值，让孙子组件隐藏。
爷孙组件是无法直接进行通信的，只能通过两次的父子组件通信实现爷孙组件通信。

兄弟组件之间的通信

Vue.prototype.$eventHub=new Vue()
Vue.component("gege",{
  template: `
   
我是哥哥进行通信
  `,
  methods: {
    helloDiDi(){
      this.$eventHub.$emit('talk','弟弟你好')
     }
  }
})
Vue.component("didi",{
  data(){
    return {
      msg: "默认值"
    }
  },
  template: `
    
我是弟弟
{{msg}}
  `,
  created(){
    this.$eventHub.$on('talk',(msg)=>{
       this.msg=msg
    })
  }
})
let app=new Vue({
  el: "#app"
})

首先在Vue原型上定义一个$eventHub变量存储一个空的Vue实例作为中央事件总线。
这里要用到的是 $emit() 和 $on() 两个方法，前者用于触发事件并发送数据，后者用于监听事件并接收数据。

兄弟组件之间通信就三点

1. 新建中央事件线
2. $emit 发送数据
3. $on 监听并接受数据