方法一: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)

} )

Logo

前往低代码交流专区

更多推荐