vue中组件间通信（父子，子父，兄弟，跨两级通信）

目录

 最基本的组件通信方法：  

 app组件：

 grandFa组件：

father组件：

 grandSon组件：

 使用$emit()实现子父通信

father组件

下面是grandSon组件

 使用全局事件总线实现任意两个组件之间通信

 grandFa组件

 grandSon组件

总结：

---

因为今天正好看完Bzhan张天禹老师教的toDoList案例，然后里面就涉及到到了各种组件间的通讯方式，听的还是比较明白，因为在之前还没有系统的学习vue的时候就已经弄了一些简单的组件通讯案例，今天学习到了听到也懂的快，但是我还是觉得需要自己动手弄一下，果然，在今天我晚上弄的时候就是那种道理我都懂，但是实操起来是真的不知道怎么下手，。。。。然后果断的又返回去看了例子，最后弄了好一会才搞出来。

好了直接上例子把，里面都有解释的~~~

 

 最基本的组件通信方法：  

然后这个就是涉及到的组件，和老师讲的几乎差不多，就是所有的都由app来管理，grandfa中管理fathe，father管理grandson。父子通信就是通过props传递数据，在父组件引入子组件时在子组件上面绑定一个一个参数，使用 ：参数名=‘变量/方法’。

然后子向父通信，就是要在父组件中先准备一个方法绑定在被映入到父组件的子组件身上，然后在子组件中使用props接收，并且返回给父组件一个参数，然后父组件就可以直接使用这个参数了

 app组件：

 grandFa组件：

father组件：

 grandSon组件：

 使用$emit()实现子父通信

father组件

里面只有一点改了，我用红色圈出来，然后其他都是和上面一样的，在这里使用@绑定一个自定义事件

下面是grandSon组件

 使用全局事件总线实现任意两个组件之间通信

在main.js文件中先定义一个总线$Bus，并且使用生命周期函数beforeCreate函数，使得这个this指向Vue

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  beforeCreate(){
    Vue.prototype.$bus=this   //安装全局组件，$bus就是当前的VUeComponent示例对象
  },
  render: h => h(App),
}).$mount('#app')

 grandFa组件

 然后这个mount钩子也是生命周期函数，表示的是在挂载时调用里面的一些方法啥的，这里的data是另外一个组件向grandFa组件传来的信息

 mounted(){
    this.$bus.$on('getByBus',data=>{
        console.log('此处通过事件总线传递孙子的数据',data.name,data.age)
    })
  }

 grandSon组件

这个组件里面就是多加了一个按钮的点击事件，然后通过定义好的$bus总线向绑定事件getByBus的组件发送数据

   通过bus事件总线向爷爷发送信息



sendByBus(){
        this.$bus.$emit('getByBus',this.grand)
    }

总结：

 好啦，完整代码分享完毕啦，结合老师的例子多看几遍，最后在来试试我这个例子，你应该就能明白组件通信的原理啦。还是要多动手，不要以为你听懂了就会了，海得自己敲出来才OK。让我们一起卷起来好吗，然后这个案例这部分应该在72集左右