美文网首页
Vue全局事件总线

Vue全局事件总线

作者: itfitness | 来源:发表于2022-07-06 14:42 被阅读0次

    添加$bus属性

    首先在Vue的prototype原型对象上添加$bus属性,属性的值为当前的Vue对象,作为全局事件调度器,这里我们在beforeCreate钩子函数中添加

    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      beforeCreate() {
        Vue.prototype.$bus = this
      }
    }).$mount('#app')
    

    发送事件

    下面是定义了一个test事件,进行测试,最后也不要忘了在组件销毁的时候注销事件

    <template>
      <div>
        <HelloWorld ref="hello" @test="getMessage"/>
        <button @click="send">发送</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      },
      mounted(){
        this.$bus.$on("test",this.getMessage)
      },
      methods:{
          getMessage(msg){
              alert(msg)
          },
          send(){
              this.$bus.$emit("test","全局事件")
          }
      },
      beforeDestroy() {
        this.$bus.$off("test")
      }
    }
    </script>
    
    <style>
    
    </style>
    
    

    效果如下


    相关文章

      网友评论

          本文标题:Vue全局事件总线

          本文链接:https://www.haomeiwen.com/subject/gbrybrtx.html