vue兄弟组件传参

659 阅读1分钟

vue兄弟组件传参。

兄弟组件定义:有共同的父级,没有上下级嵌套关系。

写法:

新建一个bus.js

import  Bus  from  "vue";
let  install  = function(Vue){
          Vue.prototype.bus = new  Bus();
         };
 export  default install;

mian.js引入

import  Bus from  "bus.js";

Vue.use(Bus);

bro1

在mounted里面绑定事件
  this.bus.$on('name',(data)=>{
      console.log(data)//兄弟组件需要的数据
  })
*注意事件需要在组件销毁之前解绑,不然会多次触发
beforeDestory(){
    this.bus.$off("name");
}

bro2

<template>
    <div>
        <button  @click="change">点击改变兄弟组件</button>
    </div>
</template>
<script>
    export  default{
    methods{
      change(){
          this.bus.$emit("name","兄弟组件需要的数据")
      }
    }
    }
</script>