2021-06-06

Vue3.0的事件总线

vue3.x的事件总线创建方式：

(Vue3.x以后从实例中移除了on ，off 和 once方 法 ，once 方法，once方法，emit 仍然是现有API 的一部分，只能实现子组件触发父组件的方法。使用mitt之前先安装mitt模块)

​ >下载mitt:

npm install mitt –save

​ >在程序中使用事件总线：

main.js配置
import mitt from 'mitt';//引入mitt
app.config.globalProperties.$bus = new mitt();//绑定事件总线

发射事件总线：（注意，此处的发射事件是emit而不是$emit）

this.$bus.emit(“事件”)

监听事件总线：（注意，此处的监听事件是on而不是$on）

this.$bus.on(“事件”,() => {})

实际代码的发射和监听使用代码如下：

methods: {
   imageLoad(){
	//发射事件总线
​    this.$bus.emit('imageLoad')
   }
  },

created(){
   *// 3.监听item中的图片加载是否完成,此处监听事件是 this.$bus.on('事件',function(){})*
   console.log(this.$bus);
   this.$bus.on('imageLoad',() => {
​    this.$refs.scroll.refresh()
​    console.log("bus总线监听");
   })
  },