vue兄弟组件的传值bus

兄弟组件通信通过bus，新建一个bus.js文件，并在两个组件分别引入

 

注：当在a.vue组件上触发点击事件时，就会触发bus上监听的事件，而bus事件监听在b.vue里面，这个时候就会触发b.vue

上的事件监听，而通过回调函数，就可以拿到a.vue组件传过来的数据，从而实现兄弟组件通信。

 

bus.js

import Vue from "vue"  
export default new Vue()

parent.vue父组件

<template>  
  <div id="app">  
    <avue></avue>  
    <bvue></bvue>  
  </div>  
</template>  
  
<script>  
import avue  from "./avue.vue"  
import bvue  from "./bvue.vue"  
export default {  
  name: 'parentvue',  
  components:{avue,bvue}  
}  
</script>  

 

a.vue组件

 

<template>  
  <div @click="aload">叶落森1</div>  
</template>  
<script>  
  import bus from "./bus.js"  
  export default{  
    methods:{  
      aload(){  
        //通过emit触发事件，并传值  
        bus.$emit("bload","我叫叶落森");  
      }  
    }  
  }  
</script>

 

b.vue组件

 

<template>  
  <div>叶落森2</div>  
</template>  
<script>  
  import bus from "./bus.js"  
  export default{     
    mounted(){  
      //通过on监听事件，回调方法获取数据       
      bus.$on("bload",value=>{  
        console.log(value);  
        //this.busListen(value)//调用busListen这个方法
      }); 
  
    }  
  }  
</script> 

 

 

 

注：可以在main.js写（这是常用的方式）

Vue.prototype.bus = new Vue();

调用方法的时候直接书写以下代码就行

a.vue

this.bus.$emit("bload"); 

b.vue

mounted中写：

this.bus.$on("bload",this.bload);  

methods中写：

methods:{
    bload(){
    }
}