vue 全局事件(eventBus)设置

引言

做项目的时候需要，选择日期后触发各个页面去获取数据，但日期和页面之间无父子关系，无法使用父子组件之前事件的事件的触发，所以就用到了全局事件的绑定与触发

使用

main.js中的设置

    new Vue({
      router,
      store,
      render: h => h(App),
      data: {
        eventHub: new Vue()
      }
    }).$mount('#app')

触发

我想要做的是在日历组件选择事件后，触发首页/详情页去获取数据，所以在事件组件里cilck事件里设置emit，因为我把时间存到store里了，所以不需要传参

confirmDate (date) {
      this.$root.eventHub.$emit('changeDate', null)
    },

绑定

在需要被触发事件的页面的mouted里进行绑定, 第二个参数是回调函数，被触发后执行第二个参数的方法，注意方法不要加（）

  mounted () {
    this.$root.eventHub.$on('changeDate', this.getHeadData)
  },

如果多处页面绑定该事件，要在销毁该页面时接触绑定，要不然在其他页面也触发了该页面的事件

  beforeDestroy () {
    this.$root.eventHub.$off('changeDate')
  },

我之前就是因为没接触绑定，触发了多次事件

最后

以上就是冷艳银耳汤为你收集整理的vue 全局事件(eventBus)设置的全部内容，希望文章能够帮你解决vue 全局事件(eventBus)设置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。