vue解决兄弟组件之间传值的问题

vue解决兄弟组件之间传值的问题

vue中父组件子组件相互传递参数的时候可以用多种方式实现:

1. 父组件使用 prop 来传递参数,prop可以是数组也可以是对象,子组件通过$emit(‘方法名’,参数),来实现
2. 使用 ref / refs ref属性作用在子组件上,父组件通过f获取子组件数据
3. 使用依赖注入 provide / inject 可以实现跨层级的组件传值,不限于父子组件

那么兄弟组件之间如何实现数据通讯呢?
一种方式是通过父组件作为中间的传递组件实现,还有一种方式有人可能会想到使用 Vuex 但是会不会这样有点大材小用了.个别组件需要通讯,我们优先是不会考虑使用 Vuex 来解决的

下面我们使用一个好的方法实现兄弟组件之间数据通讯 我们称为 bus.js
顾名思义 bus 是一种公共交通,意思就是所有人都可以上车.

我们使用以下方式实现

1.通过创建 util/bus.js 文件,在需要用到的组件中引入然后调用它即可

// bus.js
import Vue from 'vue';
export default new Vue();

文件内容很简单,我们只需要定义一个vue实例并暴露出去

2.创建相关组件

父组件中注册并使用子组件

3.分别在子组件 one 和 two 中 引入 bus.js

one 组件向 two 组件传值 使用$emit 第一个参数可以理解为一个标识,two组件中会用到

two 组件接收到 one 组件的值 使用 $on

到这里点击按钮就可以实现 one 组件向兄弟组件 two 传值了