vue brothers do not need a parent component to pass values, okay? Just two sibling components
first I created a new js file eventBus.js
and wrote
import Vue from "Vue"
export default new Vue;
one components
<div class="a1">
<button @click="start"></button>
</div>
import bus from "../assets/eventBus";
data(){
return{
acc:"2"
}
},
start(){
const a1=this.mydata;
let a2=this.acc;
bus.$emit("userDefinedEvent",[a1,a2]);
}
two components
<div class="a1">
<span>:<br/>{{aaaaaaaaaaaaaaaaa}}</span>
</div>
import bus from "../assets/eventBus";
return{
aaaaaaaaaaaaaaaaa:""
}
mounted(){
const _this=this;
bus.$on("userDefinedEvent",function(msg){
_this.aaaaaaaaaaaaaaaaa=msg;
})
},
in the three parent component
<div class="home">
<one></one>
<two></two>
</div>
import one from "@/components/one";
import two from "@/components/two";
components:{
one,
two
}
this enables the communication between the two sibling components, but I don"t want the parent component now. It"s just the data exchange between the two components. How can I do that?
because it"s all imported in the parent component, I don"t need to import it in the parent component now, it"s just a communication between the two sibling components, how can I implement it?