Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
前言
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。
首先用 vue-cli 創(chuàng)建一個(gè)項(xiàng)目，其中 App.vue 是父組件，components 文件夾下都是子組件。
一、父組件向子組件傳遞數(shù)據(jù)
在 Vue 中，可以使用 props 向子組件傳遞數(shù)據(jù)。
子組件部分：
這是 header.vue 的 HTML 部分，logo 是在 data 中定義的變量。
如果需要從父組件獲取 logo 的值，就需要使用 props: ['logo']
父組件部分：
在調(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è)自定義的事件，功能類(lèi)似于一個(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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue路由傳參的3種基本模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報(bào)錯(cuò),飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01
Vue 項(xiàng)目中如何使用fullcalendar 時(shí)間段選擇插件(類(lèi)似課程表格)
最近完成一個(gè)項(xiàng)目,需要選擇一個(gè)會(huì)議室,但是最好能夠通過(guò)在圖上顯示出該 會(huì)議室在某某時(shí)間段內(nèi)已經(jīng)被預(yù)定了,初看這個(gè)功能感覺(jué)很棘手,仔細(xì)分析下實(shí)現(xiàn)起來(lái)還是挺容易的,下面通過(guò)示例代碼講解Vue項(xiàng)目中使用fullcalendar時(shí)間段選擇插件,感興趣的朋友一起看看吧2024-07-07
@change 是 Vue.js 中用于監(jiān)聽(tīng)表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當(dāng)前的參數(shù)呢？本文給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-11-11
這篇文章主要給大家介紹了關(guān)于vite打包拆分js和css的配置指南,Vite是一個(gè)非?？焖俚墓ぞ?它可以幫助你打包JavaScript文件,需要的朋友可以參考下2023-09-09
Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫(xiě)
這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫(xiě)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了el-form中的rules未生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
bootstrap vue.js實(shí)現(xiàn)tab效果
這篇文章主要為大家詳細(xì)介紹了bootstrap vue.js實(shí)現(xiàn)tab效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳讀取及下載功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09