vue 事件派发和监听 （两种方法）

方法一：js原生

事件派发：

// 自定义事件

const event = new CustomEvent("TwoAlarm", { 

detail: this.info   //  派发事件的参数信息

});

// 触发事件

window.dispatchEvent(event);

 

事件监听：

mounted:{//要在mounted之中

      window.addEventListener("OneAlarm", event => {

                    if (event.type == "OneAlarm") {

                                   this.title = "一级告警详情";

                      }

      }）

}

方法二：

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

?

1 2 3 4 5 6 7 8

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

好的 这个时候 你就可以一劳永逸了，在任何组件都可以调用事件发射 接受的方法了.

如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个

某一个组件内调用事件触发

?

1 2 3

//通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)

另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法

?

1 2 3

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