淺談vue父子組件怎么傳值
更新時(shí)間：2018年07月21日 09:12:52 作者：yali
這篇文章主要介紹了淺談vue父子組件怎么傳值,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
背景：最近在做vue的項(xiàng)目，因?yàn)轫?yè)面的邏輯比較復(fù)雜，代碼量較多，所以就想抽離出一些組件放到component里面。問題就隨之來(lái)了。
因?yàn)関ue不提倡在子組件中修改父組件的值，所以如果要這樣操作的話就要麻煩一步，而我正好需要這樣的操作，于是就查閱了資料
上父組件的代碼，引用了exp-group子組件
<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>
grpVisible 和 grpData 是傳給子組件的屬性，一個(gè)是普通類型，一個(gè)是對(duì)象
grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},
接下來(lái)我要在子組件中改變這兩個(gè)屬性的值傳給父組件，先要在子組件中定義一下
props: {
grpVisible: {
type: Boolean,
default: false
},
grpData: {
type: Object
}
},
首先普通類型的 grpVisible 屬性如果要修改，需要定義一個(gè)變量將 grpVisible 值復(fù)制給這個(gè)變量，然后再修改這個(gè)變量，傳遞給父組件，具體見代碼
let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子組件
父組件通過acceptData的參數(shù)value接收這個(gè)值
acceptData (value) {
console.log(value)
}, //父組件
如果是對(duì)象的話，就需要用Object.assign拷貝一份新的賦值給一個(gè)變量，然后修改這個(gè)變量，傳遞給父組件，代碼如下：
let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)，指是路由跳轉(zhuǎn)前、中、后過程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02
Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK ),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
微信、支付寶支付密碼時(shí)的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實(shí)現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue使用Post進(jìn)行表單提交，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了mpvue全局引入sass文件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式
這篇文章主要介紹了vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式，主要介紹Hash 路由和History 路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07
這篇文章主要介紹了vue組件之間進(jìn)行傳值的方法，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03