非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值。
当调用send触发bus的aa自定义事件,bus上绑定的事件,一旦触发emit,bus.$on将被触发接收到msg赋给this.msg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<tab1></tab1>
<tab2></tab2>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
const bus= new Vue();//非父子传值(兄弟传值)
//兄弟组件1
Vue.component("tab1",{
template:`
<div>tab1 <button @click="send">点击</button> </div>
`,
data(){
return{
msg:"tab1"
}
},
methods:{
send(){
//出发自定义aa事件,携带了数据
bus.$emit("aa",this.msg);
}
},
});
//兄弟组件2
Vue.component("tab2",{
template:`
<div>tab2 {{msg}}</div>
`,
data(){
return{
msg:""
}
},
//挂载的构造函数
mounted(){
//给hug绑定"aa"的事件
bus.$on("aa",(msg)=>{
this.msg=msg;
})
},
});
new Vue({
el: "#app",
data: {
}
})
</script>
运行后:
当点击后: