众所周知,vue提供了很多套组件间传值的方法,父子组件直接用props和$emit就好,大型项目则用vuex,但有一种更适合在小项目中使用的非父子组件传值方法,即bus总线机制。它的用法的实现原理是前端面试中常考的。在第一次换工作的时候,几乎所有面试官都问了有关vue组件传值的几种方法,所以掌握这个知识点是很重要的。
这种方法的原理是通过一个空的Vue实例作为中央事件总线,通过它来触发事件和监听事件,可以实现几乎任何组件间的通信,这在一些比较小的项目中是非常好用的,当然如果是简单的小项目,你也可以使用$root(但我坚决不支持这样使用,可以在面试时炫技)。接下来我们来看看在项目中的实战:
在utils文件夹下面定义一个bus.js,这样一个中央事件总线就定好了,里面内容就这两行:
import Vue from 'vue'
export const Event = new Vue() // 定义一个事件总线
传递方:
import { Event } from '../../utils/bus' // 引入这个事件总线
export default {
data() {
userId: ''
}
watch: {
userId() { // 监听userId改变时触发事件,当然你可以在所有其他事件去触发$emit
Event.$emit('changeUser', userId) // $emit接收参数,一个是触发的事件名,一个是携带的参数
}
}
接收方:
import { Event } from '../../utils/bus' // 依然是把bus总线引进来
export default {
created() {
Event.$on('changeSonRoute',showIndex => { // $on接收发送方传给我们的数据
console.log(showIndex)
})
}
}
这个方法听起来挺唬人的,但实际操作就是这么简单。