vue2.0如何來(lái)實(shí)現(xiàn)的父子組件以及兄弟組件之間的傳值

1.子組件使用父組件的值或數(shù)據(jù)

結(jié)構(gòu)如圖:

做為父組件的index.vue


做為子組件在父組件當(dāng)中使用的組件one和two


2.父組件使用子組件當(dāng)中的數(shù)據(jù)或者值

父組件index.vue

為父組件供值的同時(shí)也做為父組件中子組件的組件three


3.兄弟組件之間的傳值,three和four兩個(gè)非父子組件之間的傳值


兄弟組件之間數(shù)據(jù)的傳遞如果不使用vuex的話(huà),那么可以使用bus來(lái)傳值,所以在這里在需要互相通信的兄弟組件之間引入了Bus(一個(gè)js);

Bus.js


整個(gè)項(xiàng)目的框架結(jié)構(gòu)


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 重點(diǎn)啊??!當(dāng)初學(xué)這個(gè)時(shí)候,糾結(jié)了好一會(huì)兒。先來(lái)看看組件關(guān)系。 可以把一個(gè)網(wǎng)頁(yè)拆分成很多部分,如圖所示,可以理解為一...
    八寶君閱讀 3,025評(píng)論 9 7
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,178評(píng)論 0 29
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,569評(píng)論 19 139
  • 前言 在vue項(xiàng)目中,不可避免的會(huì)在不同組件之間進(jìn)行傳值 ,不同需求下有各式各樣的傳值方式。就比如說(shuō),兄弟組件傳值...
    喜歡未來(lái)你的我閱讀 1,541評(píng)論 2 12
  • 打開(kāi)qq總是會(huì)不自覺(jué)的打開(kāi)你的分組,即使不找你,也會(huì)點(diǎn)進(jìn)去看一下再退出來(lái)。我只想放手去做,不論結(jié)果對(duì)錯(cuò)。并不知道因...
    旅人未安閱讀 125評(píng)論 0 0

友情鏈接更多精彩內(nèi)容