the sibling component passes the value by registering the event bus, the same method, a passing b, or b passing a seems to be used only once? The other time there is no response and there will be no error, then the question is: if it is a sibling component, a changes a value of b, b also changes a value of a, what should I do?
paste the code
bus.js content:
import Vue from "vue"
export default new Vue;
split line--
bro1 component:
split line--
< template >
< div class= "bro1" >
<h1>bro1</h1>
<button @click="sendMsg">a</button>
<h2>bro1msg,:{{msg}}</h2> < / div >
< / template >
< script >
import bus from". / bus"
export default {
name: "bro1",
data () {
return {
msg: "Welcome bro1111111"
}},
methods: {
sendMsg(){
bus.$emit("receiveMsg",this.msg)
}},
mounted () {
bus.$on("changeAmsg",(msg)=>{
this.msg=msg;
})}
}
< / script >
< style scoped >
< / style >
split line--
bro2 component:
split line- -
< template >
< div class= "bro2" >
<h1>bro2</h1>
bro1:{{msg}}
<button @click="sendAmsg">amsg</button> < / div >
< / template >
< script >
import bus from". / bus"
export default {
name: "bro2",
data () {
return {
msg: "Welcome bro2 "
}},
mounted () {
bus.$on("receiveMsg",(data)=>{
this.msg=data;
})
},
methods: {
sendAmsg(){
bus.$emit("changeAmsg",this.msg)
}}
}
< / script >
< style scoped >
< / style >