在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue的兄弟組件通信問(wèn)題

vue的兄弟組件通信問(wèn)題

兄弟組件通過(guò)注冊(cè)事件總線方式傳值,同樣的方法,a傳b,或者b傳a 好像只可以使用一次啊 ?點(diǎn)另外一次沒(méi)有反應(yīng)也不會(huì)報(bào)錯(cuò),那問(wèn)題是:如果是兄弟組件,a改變b的一個(gè)值,b也要改變a的一個(gè)值,該怎么弄?
貼上代碼
bus.js內(nèi)容:

import Vue from 'vue'

export default new Vue;

分割線---------------------------------------------------------

bro1組件:
分割線---------------------------------------------------------

<template>
<div class="bro1">

  <h1>我是bro1組件</h1>
  <button @click="sendMsg">我是a組件的按鈕</button>
  <h2>我是bro1的msg,內(nèi)容為:{{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>

回答
編輯回答
臭榴蓮

問(wèn)問(wèn)題把版面先排排好把。

2018年9月4日 12:15