Vue中常见的传参方式有哪些

父子组件之间传参

父子组件之间最常用的组件传参方式就是：父传子使用v-bind:attr传递，子组件使用props接收，子传父使用方法传递，父组件在方法参数中获取，即$emit['method':val],父组件使用@method接收。

// 父传子
// 父组件


// 子组件

除此之外，vue还提供了一种语法糖，可以简单的实现父子组件间数据的双向绑定。

// 父组件


// 子组件

父组件还可以使用$refs直接调用子组件的所有属性和方法，但是并不推荐使用这种方法。

// 父组件可以使用$refs.child.xxx直接调用子组件的属性和方法

兄弟组件之间传参

兄弟组件之间传参可以使用vuex、localStorage、sessionStorage、EventBus事件中转，前面三种方法无非就是找第三方把数据存起来，需要的时候再获取就行，这里主要讲一下事件中转的用法。

// 1.首先在app.vue种定义一个中转站，再挂载到全局对象上面。
// App.vue
Vue.prototype.$eventBus = new Vue()
// 2.在需要传递的页面使用$emit(eventName,params)发射参数
this.$eventBus.$emit(eventName,params)
// 3.在需要接收参数的页面使用$on(eventName,(params) => {}) 接收参数
this.$eventBus.$on(eventName,(params) => {})

这种方法其实还可以用于跨层级传参，以前我很抵触这种用法，后来用过一次之后觉得真香啊。还有需要注意的一点就是在组件销毁的时候记得移除监听的事件绑定，使用$eventBus.$off(eventName)实现事件监听移除。

provide/inject传参

provide/inject可以用于跨层级传参，不过只能从上到下：

// 在上级组件中使用provide修饰的数据，在下级组件中可以使用inject接收，类似于props
 // 上级组件
 

值得注意的是，如果上级组件传的数据是响应式的，那么接收到的数据就是响应式的，反之亦然。