Vue中的自定义事件
绑定事件监听
<Header @addTodo="addTodo"/>
或者<Header ref="header"/>
this.$refs.header.$on('addTodo', this.addTodo)
触发事件
this.$emit('addTodo', todo)
全局事件总线
理解
- Vue原型对象上包含事件处理的方法
$on(eventName, listener)
: 绑定自定义事件监听$emit(eventName, data)
: 分发自定义事件$off(eventName)
: 解绑自定义事件监听$once(eventName, listener)
: 绑定事件监听, 但只能处理一次
- 所有组件实例对象的原型对象的原型对象就是Vue的原型对象
- 所有组件对象都能看到Vue原型对象上的属性和方法
Vue.prototype.$bus = new Vue()
, 所有的组件对象都能看到$bus这个属性对象
- 全局事件总线
- 包含事件处理相关方法的对象(只有一个)
- 所有的组件都可以得到
指定事件总线对象
new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.$globalEventBus = this
},
}).$mount('#root')
绑定事件
this.$globalEventBus.$on('deleteTodo', this.deleteTodo)
分发事件
this.$globalEventBus.$emit('deleteTodo', this.index)
解绑事件
this.$globalEventBus.$off('deleteTodo')
消息订阅与发布
理解
- 这种方式的思想与全局事件总线很相似
- 它包含以下操作:
(1) 订阅消息 --对应绑定事件监听
(2) 发布消息 --分发事件
(3) 取消消息订阅 --解绑事件监听 - 需要引入一个消息订阅与发布的第三方实现库: PubSubJS
使用PubSubJS
- 在线文档: https://github.com/mroderick/PubSubJS
- 下载:
npm install -S pubsub-js
- 相关语法
(1)import PubSub from 'pubsub-js'
// 引入
(2)PubSub.subscribe(‘msgName’, functon(msgName, data){ })
(3)PubSub.publish(‘msgName’, data)
: 发布消息, 触发订阅的回调函数调用
(4)PubSub.unsubscribe(token)
: 取消消息的订阅