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>