使用vuex对兄弟组件传值_vue 组件传参

一、父子组件通信

1、props和$emit/$on

(1) 父组件向子组件传参

在父组件使用v-bind 传值，子组件中使用props接收参数

(2) 子组件给父组件传递数据——自定义事件

子组件通过$emit方法，触发父组件v-on的事件

优点

使用简单，是父子组件最基础的传参方法。

props提供了类型检查支持

$emit不会修改到别的组件的同名事件，它只会触发父级事件，这里和event-bus不同

缺点

多层组件需要逐层传递

不能解决多个组件依赖同一个状态的问题

2、$refs，$parent, $children

(1)子组件可以使用$parent 访问父组件实例，父组件可以通过$children对子组件进行操作。

缺点：一个组件的子组件可能不是唯一的，返回值是一个数组。所以无法确定子组件的顺序。

(2)ref如果作用在DOM元素上，引用指向的是DOM元素；如果作用在子组件上，引用指向的是子组件实例，可以直接访问子组件的数据和调研子组件的方法。

3、.sync 修饰符

开发过程中，我们一般使用props/emit 实现双向绑定，为了方便起见，在2.3.0版本中提供了一个语法糖.sync修饰符。

二、兄弟组件通信

1、eventBus(中央事件总线)

evnetBus的原理是新建一个新的Vue实例，然后通过bus.$emit触发事件，bus.$on监听触发的事件，实现通信和参数的传递。

初始化bus

Vue.prototy