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

鍍金池/ 問(wèn)答/HTML/ vue兩個(gè)子組件之間如何不用vuex進(jìn)行簡(jiǎn)單的通信?

vue兩個(gè)子組件之間如何不用vuex進(jìn)行簡(jiǎn)單的通信?

簡(jiǎn)單來(lái)說(shuō),就是一個(gè)子組件通過(guò)$emit來(lái)傳一個(gè)object到父組件,但是父組件接收不到參數(shù)
比如一個(gè)簡(jiǎn)單的單頁(yè)面應(yīng)用,app.vue 文件里面通過(guò) vue-router 引入了 a組件b組件
代碼大概如下


<div class='app'>
    <div class='nav'>
        <router-link to='/a'>前往a頁(yè)面</router-link>
        <router-link to='/b'>前往b頁(yè)面</router-link>
    </div>
    <div class='content'>
        <router-view></router-view>
    </div>    
</div>    

然后,現(xiàn)在點(diǎn)擊 a組件 里面的一個(gè)按鈕之后,
把一個(gè)對(duì)象傳到 b組件 (不用vuex)
我的想法就是,點(diǎn)擊了a組件的button之后,this.$emit一個(gè)事件,
然后把對(duì)象做為參數(shù),一起傳到app.vue ,
然后在app.vue 通過(guò)監(jiān)聽(tīng)事件獲取到 a組件 傳來(lái)的事件和參數(shù)
然后 我試了一下在分別在app.vue.contentrouter-viewv-on 來(lái)接收事件
發(fā)現(xiàn)在router-view能夠成功接收到a組件傳來(lái)的事件
然后試著console一下接收到的參數(shù)
發(fā)現(xiàn)輸出undefined


代碼大概如下:


      <!--app.vue-->
      <div class="view-wrapper">
        <router-view @tomodify="sendData(good)"></router-view>
      </div>
      //script in app.vue
        methods: {
          sendData (good) {
            this.agood = good
            console.log(this.agood)  //成功執(zhí)行但是輸出 undefined
          }
        }

    <!-- a組件 -->
    <button class="modifyBtn" @click="toModify(good)">修改</button>
    //script in a組件
    data () {
       toModify (good) {
         console.log(good)  //成功輸出一個(gè)對(duì)象
         this.$emit('tomodify', [good])
       }
    }

希望各位大佬指教一下,很簡(jiǎn)單的問(wèn)題但是搞了好久
appreciate。

回答
編輯回答
離魂曲

App.vue的router-view標(biāo)簽就是他們的父組件,你可以把數(shù)據(jù)存在那邊然后prop隨意給你的a,b組件

2017年4月17日 02:10
編輯回答
只愛(ài)你

你干脆安裝一個(gè)vue-bus插件吧

npm install vue-bus

入口文件引入一下

import Vue from 'vue';
import VueBus from 'vue-bus';

Vue.use(VueBus);

A組件:

this.$bus.emit('myEvent', 'hello'); // 觸發(fā)自定義事件傳遞數(shù)據(jù)

B組件:

this.$bus.on('myEvent', (myData) => {
    console.log(myData); // hello
}); 
2018年1月25日 21:59
編輯回答
幼梔

簡(jiǎn)單點(diǎn):
1.子emit到父
2.父prop到子

2018年4月19日 00:47
編輯回答
墻頭草

這種情況屬于兄弟組件通訊,用event-bus是實(shí)現(xiàn)通訊即可??梢詤⒖?a rel="nofollow noreferrer">官方文檔。
不過(guò)官方文檔一筆帶過(guò),看不懂的話可以參考我的文章: vue兄弟組件event-bus通訊。文章有示例代碼,如果有疑問(wèn)歡迎交流

2017年6月19日 01:17