Vue2.0 事件发射与接收

来源:互联网 发布:js object添加元素 编辑:程序博客网 时间:2024/05/21 05:55

参考文档:http://blog.csdn.net/a5534789/article/details/53415201
由于vue2.0 是使用集中的事件处理器,通过定义一个空的vue实例 实例实现了一个事件分发接口,
这样可以做到在任何组件都可以调用事件发射 接受的方法

请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象

new Vue({  el: '#app',  router,  render: h => h(App),  data: {    eventHub: new Vue()  }})

这里写图片描述

某一个组件内调用事件触发
//通过this.root.eventHub//emit 方法

this.$root.eventHub.$emit('YOUR_EVENT_NAME', params)

这里写图片描述
另一个组件内调用事件接受,当然在组件销毁时解除绑定,使用$off方法

this.$root.eventHub.$on('YOUR_EVENT_NAME', (params)=>{    handle(params)} )

这里写图片描述

原创粉丝点击