首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

vue-bus: Vue.js 事件中心插件

2024-12-20 来源:华佗小知识
$ npm install vue-bus

如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装 vue-bus:

import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus);

如果使用全局的 script 标签,则无须如此(手动安装)。
使用
监听事件和清除监听

created() { 
  this.$bus.on('add-todo', this.addTodo); 
  this.$bus.once('once', () => console.log('这个监听器只会触发一次'));
},
beforeDestroy() {
 this.$bus.off('add-todo', this.addTodo);
},
methods: {
  addTodo(newTodo) {
  this.todos.push(newTodo); 
  }
}

触发事件

methods: {
addTodo() {
  this.$bus.emit('add-todo', { text: this.newTodoText }); 
  this.$bus.emit('once'); 
  this.newTodoText = ''; 
 }
}
显示全文