深入理解Vue 組件之間傳值
一、父組件向子組件傳遞數(shù)據(jù)
在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。
子組件部分：
這是 header.vue 的 HTML 部分，logo 是在 data 中定義的變量。
如果需要從父組件獲取 logo 的值，就需要使用props: ['logo']
在 props 中添加了元素之后，就不需要在 data 中再添加變量了
父組件部分：
在調(diào)用組件的時(shí)候，使用 v-bind 將 logo 的值綁定為 App.vue 中定義的變量 logoMsg
然后就能將App.vue中 logoMsg 的值傳給 header.vue 了：
二、子組件向父組件傳遞數(shù)據(jù)
子組件主要通過(guò)事件傳遞數(shù)據(jù)給父組件
子組件部分：
這是 login.vue 的 HTML 部分，當(dāng)<input>的值發(fā)生變化的時(shí)候，將 username 傳遞給 App.vue
首先聲明一個(gè)了方法setUser，用 change 事件來(lái)調(diào)用 setUser
在 setUser 中，使用了$emit來(lái)遍歷transferUser事件，并返回 this.username
其中transferUser是一個(gè)自定義的事件，功能類似于一個(gè)中轉(zhuǎn)，this.username將通過(guò)這個(gè)事件傳遞給父組件
父組件部分：
在父組件 App.vue 中，聲明了一個(gè)方法 getUser，用 transferUser 事件調(diào)用 getUser 方法，獲取到從子組件傳遞過(guò)來(lái)的參數(shù) username
getUser 方法中的參數(shù) msg 就是從子組件傳遞過(guò)來(lái)的參數(shù) username
三、子組件向子組件傳遞數(shù)據(jù)
Vue 沒(méi)有直接子對(duì)子傳參的方法，建議將需要傳遞數(shù)據(jù)的子組件，都合并為一個(gè)組件。如果一定需要子對(duì)子傳參，可以先從傳到父組件，再傳到子組件。
為了便于開(kāi)發(fā)，Vue 推出了一個(gè)狀態(tài)管理工具 Vuex，可以很方便實(shí)現(xiàn)組件之間的參數(shù)傳遞
總結(jié)
以上所述是小編給大家介紹的Vue 組件之間傳值，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
超詳細(xì)教程實(shí)現(xiàn)Vue底部導(dǎo)航欄TabBar
本文詳細(xì)講解了Vue實(shí)現(xiàn)TabBar底部導(dǎo)航欄的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue如何利用axios調(diào)用后臺(tái)api接口
這篇文章主要介紹了vue如何利用axios調(diào)用后臺(tái)api接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
深入探究Vue中$nextTick的實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹Vue中$nextTick的實(shí)現(xiàn)原理，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue有一定的幫助，需要的小伙伴可以參考一下2023-06-06
vue做移動(dòng)端適配最佳解決方案(親測(cè)有效)
這篇文章主要介紹了vue做移動(dòng)端適配最佳解決方案(親測(cè)有效)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了在Vue.js中加載字體的正確方法,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了Vue組件和Route的生命周期的相關(guān)知識(shí),需要的朋友可以參考下2018-02-02
這篇文章主要為大家通過(guò)示例解析Ant?Design?Vue組件slots作用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue按時(shí)間段查詢數(shù)據(jù)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了Vue按時(shí)間段查詢數(shù)據(jù)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08