vue2.X父子組件傳值

一直聽(tīng)朋友說(shuō)vue組件化簡(jiǎn)單好用,今天搞了一下組件之間的傳值,看了好多教程終于鼓搗出來(lái)了,分享一下踩的坑。

子傳父主要通過(guò)events,父?jìng)髯又饕ㄟ^(guò)props,這里借用一張圖片,表達(dá)。


基于vue-cli?

子組件向父組件傳值

子組件

定義點(diǎn)擊事件setVa 點(diǎn)擊之后往父組件傳“管理員列表”,用this.$emit(要觸發(fā)的事件,這個(gè)可以自定義,要傳給父組件的值)這個(gè)方法,

子組件需要某種事件比如change事件這樣的一個(gè)方法來(lái)觸發(fā)自定義事件

父組件


在父組件里引入子組件,然后在子組件標(biāo)簽上綁定子組件頁(yè)面里面自定義的事件,在methods里寫(xiě)一個(gè)事件響應(yīng)的函數(shù)就可以了。


父組件向子組件傳值

子組件

? ? props里面title就是父組件傳進(jìn)來(lái)的

父組件


引入子組件,然后在子組件標(biāo)簽上寫(xiě):title(因?yàn)槲沂莿?dòng)態(tài)引入的所以加:,如果不是則不用)后邊跟你要傳的值


總結(jié)

? ? 無(wú)論是子傳父還是父?jìng)髯?,她們都需要一個(gè)中間的介質(zhì),子傳父介質(zhì)是自定義事件,父?jìng)髯邮莗rops,記住這兩點(diǎn)就可以實(shí)現(xiàn)基本的組件傳值了。

?著作權(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)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,506評(píng)論 19 139
  • 推薦我的vue教程:VUE系列教程目錄 上篇講解了vue-router路由入門(mén),現(xiàn)在講講關(guān)于vue組件的內(nèi)容。如果...
    儂姝沁兒閱讀 2,390評(píng)論 6 20
  • Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。本文將介紹一些重要入門(mén)的知識(shí)點(diǎn),比如:運(yùn)行環(huán)境的搭建、定義組件的方式、...
    浪里行舟閱讀 1,348評(píng)論 1 15
  • 1.安裝 可以簡(jiǎn)單地在頁(yè)面引入Vue.js作為獨(dú)立版本,Vue即被注冊(cè)為全局變量,可以在頁(yè)面使用了。 如果希望搭建...
    Awey閱讀 11,278評(píng)論 4 129
  • 我一直以為我是個(gè)英雄,但…… 記憶就是片段,或者只剩下片段 小時(shí)候第一個(gè)印象,是穿著娘個(gè)做的衣裳,四個(gè)兜的,右下那...
    真沾老劉閱讀 290評(píng)論 0 0

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