Vue的bus事件车方法

bus事件车两种写法

1.第一种

BUS事件车方法：Event Bus
1.父组件中
<script>
     import MyComBus from './components/MyComBus.vue'
     export default{
     components:{MyComBus}
     mounted(){
             //进入页面的石化监听根元素$root中发送的消息
             //参数1：要听的消息名 下面this.$root.$emit('哈哈',{msg:'消息内容',num}) 
             this.$root.$on('哈哈',function(data){
             //data:就是$emit('哈哈'，具体数据data)
             console.log('收到的具体信息',data)        
             //{msg:"消息内容",num:"3"} 
         })         
       },
       beforeDestroy(){
           //通常：在销毁前会关闭监听
           this.$root.$off('哈哈')       
       }
      
   }
</script>

2.子组件中
//MyComBus.vue
<template>
    <div>
      <buttom @click="chooseNum(1)">One</buttom>
      <buttom @click="chooseNum(2)">Two</buttom>
      <buttom @click="chooseNum(3)">Three</buttom>
    </div>
</template>
<script>
   export default{
       methods:{
         chooseNum(num){
               console.log('this',this)
               //$root:Vue  this.$root是所有组件的根组件    
               //在$root中向外发布消息，就可以被所有的组件接收到，因为都是同一个根
               //参数1：自定义的值，随便写
               //参数2：与参数1名称绑定的相关信息
               //就是利用根向外发送消息
               this.$root.$emit('哈哈',{msg:'消息内容',num}) 
           }       
       }
   }
</script>
//发信息
chooseNum(num){
               console.log('this',this)
               //$root:Vue  this.$root是所有组件的根组件    
               //在$root中向外发布消息，就可以被所有的组件接收到，因为都是同一个根
               //参数1：自定义的值，随便写
               //参数2：与参数1名称绑定的相关信息
               //就是利用根向外发送消息
               this.$root.$emit('哈哈',{msg:'消息内容',num}) 
           }       
    
//收信息
this.$root.$on('哈哈',function(data){
             //data:就是$emit('哈哈'，具体数据data)
             console.log('收到的具体信息',data)        
             //{msg:"消息内容",num:"3"} 
         })

2.第二种

BUS事件车方法2：Event Bus
1.定义一个公共示例
    a.脚手架根目录直接创建bus.js文件，如下
        import Vue from 'vue'
        export default new Vue()
    b.在main.js中引入，代码如下
        import bus from './bus'
        Vue.prototype.bus = bus
2.绑定事件
    this.bus.$on('自定义事件名'，this.方法名.bind(this))
    //确保当前方法名前的this指向new Vue，而不是window
    或者
    bus.$on('自定义事件名',(参数)=>{
        //必须使用箭头函数：内外公用this,要求this->当前组件对象    
    })
3.触发事件
    this.bus.$emit('自定义事件名',实参)

Vue的bus事件车方法

悦读