64.vue2.0学习 —— Vue中的自定义事件

Vue中的自定义事件

绑定事件监听
<Header @addTodo="addTodo"/>或者<Header ref="header"/>

this.$refs.header.$on('addTodo', this.addTodo)

触发事件
this.$emit('addTodo', todo)

全局事件总线

理解

1. Vue原型对象上包含事件处理的方法
   1. $on(eventName, listener): 绑定自定义事件监听
   2. $emit(eventName, data): 分发自定义事件
   3. $off(eventName): 解绑自定义事件监听
   4. $once(eventName, listener): 绑定事件监听, 但只能处理一次
2. 所有组件实例对象的原型对象的原型对象就是Vue的原型对象
   1. 所有组件对象都能看到Vue原型对象上的属性和方法
   2. Vue.prototype.$bus = new Vue(), 所有的组件对象都能看到$bus这个属性对象
3. 全局事件总线
   1. 包含事件处理相关方法的对象(只有一个)
   2. 所有的组件都可以得到

指定事件总线对象

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. 它包含以下操作:
   (1) 订阅消息 --对应绑定事件监听
   (2) 发布消息 --分发事件
   (3) 取消消息订阅 --解绑事件监听
3. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

使用PubSubJS

1. 在线文档: https://github.com/mroderick/PubSubJS
2. 下载: npm install -S pubsub-js
3. 相关语法
   (1) import PubSub from 'pubsub-js' // 引入
   (2) PubSub.subscribe(‘msgName’, functon(msgName, data){ })
   (3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用
   (4) PubSub.unsubscribe(token): 取消消息的订阅

🌺相关推荐：上一篇：Vue脚手架使用    下一篇：过度与动画