浅谈对vue组件通讯的理解

1、组件的通讯方式有很多种 而我们常用的有四种，分别是：

父传子、子传父、兄弟组件通讯、vuex

1.1、父传子

 ⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进 ⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值

1.2、子传父

首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了

1.3兄弟组件

注：所谓的兄弟组件并不是指两个或多个 components下注册的 组件，而是指在同一页面引入的不同的组件，这样的两个或多个被引入同一个页面的组件叫做兄弟组件

利用中央事件总线 eventbus

在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫$bus

传数据的时候用this.$bus.$emit传

在要接受数据的子组件 在 created钩子函数中 用$on 方法接收

1.4、vuex

将所需要传递的数据放置在vuex种 在所需要获取数据的页面使用该数据