vue–事件总线初接触
Vue-cli事件总线步骤(非全局—有路由跳转不生效的情况,请看最后的总结)
1.创建一个js文件(最好创建一个utils文件夹,把这个js放在其中),这里命名为Bus.js
2.在Bus.js文件中写入
import Vue from ‘vue’
export const EventBus = new Vue()
……
3.在使用到的组件中都要引入(因为是非全局的)
import { EventBus } from “../utils/Bus”
4.发布订阅
在事件中调用发布订阅方法,其中bus是对应的名字,接收时要对应起来,这里发布的数据是一个对象,接收的话也会是一个对象,所以注意接收值的结构,
EventBus.$emit(“bus”, {
nr: this.busVal
});
5.接收组件
在接收的组件中也引入
import { EventBus } from “../utils/Bus”
然后在mounted或其他钩子函数(根据实际情况而定),写接收函数
EventBus.$on(‘bus’, busVal => {
this.val = busVal.nr
EventBus.$off(‘bus’)
})
注意这里的”bus”是名字,虽然是自定义的但与发布订阅要对应,
busVal是形参可自定义,最后确认使用完毕后要清除对应的事件总线。
Vue-cli 事件总线demo总结
本次遇到的问题:
路由跳转后,可以在控制台打印值,但无法渲染进视图
原因 :与路由跳转的加载与销毁顺序有关
解决办法:
将发布订阅写在destroyed()钩子函数中,这样会在组件销毁时发布订阅
在接受订阅的组件中
注意写在created()钩子函数中的话一定要写this.$nextTick()函数中,也是顺序原因
这是有路由跳转的情况下需要的,如果不需要路由跳转就不用了,可以直接发布并得到值,每当值改变都会触发$on
v1.5.2