vue的兄弟组件通信问题

Question

兄弟组件通过注册事件总线方式传值，同样的方法，a传b,或者b传a 好像只可以使用一次啊 ？点另外一次没有反应也不会报错，那问题是：如果是兄弟组件，a改变b的一个值，b也要改变a的一个值，该怎么弄？
贴上代码
bus.js内容：

import Vue from 'vue'

export default new Vue;

分割线---------------------------------------------------------

bro1组件：
分割线---------------------------------------------------------

<template>
<div class="bro1">

  <h1>我是bro1组件</h1>
  <button @click="sendMsg">我是a组件的按钮</button>
  <h2>我是bro1的msg,内容为：{{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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
分割线---------------------------------------------------------
bro2组件：
分割线---------------------------------------------------------
<template>
<div class="bro2">

 <h1>我是bro2组件</h1>
<p>从bro1接受到的组件是：{{msg}}</p>
<button @click="sendAmsg">改变a组件的msg</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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Answer 1

问问题把版面先排排好把。

Answer 2

你好，我按照你的两种方法，页面都可以的达到渲染，但是控制台在页面刚刷新时报错，是什么原因呢，能帮我看下吗，我的提问中有具体图片