淺談vue父子組件怎么傳值
背景:最近在做vue的項(xiàng)目,因?yàn)轫撁娴倪壿嫳容^復(fù)雜,代碼量較多,所以就想抽離出一些組件放到component里面。問題就隨之來了。
因?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},
接下來我要在子組件中改變這兩個(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)文章
Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK ),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式
這篇文章主要介紹了vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式,主要介紹Hash 路由和History 路由,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03