淺談vue父子組件怎么傳值
背景:最近在做vue的項目,因為頁面的邏輯比較復雜,代碼量較多,所以就想抽離出一些組件放到component里面。問題就隨之來了。
因為vue不提倡在子組件中修改父組件的值,所以如果要這樣操作的話就要麻煩一步,而我正好需要這樣的操作,于是就查閱了資料
上父組件的代碼,引用了exp-group子組件
<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>
grpVisible 和 grpData 是傳給子組件的屬性,一個是普通類型,一個是對象
grpVisible: false, grpData: {app: this.$route.query.app, exp: this.$route.query.exp},
接下來我要在子組件中改變這兩個屬性的值傳給父組件,先要在子組件中定義一下
props: { grpVisible: { type: Boolean, default: false }, grpData: { type: Object } },
首先普通類型的 grpVisible 屬性如果要修改,需要定義一個變量將 grpVisible 值復制給這個變量,然后再修改這個變量,傳遞給父組件,具體見代碼
let demo1 = this.grpVisible demo1 = true this.$emit('updateData', demo1) //子組件
父組件通過acceptData的參數(shù)value接收這個值
acceptData (value) { console.log(value) }, //父組件
如果是對象的話,就需要用Object.assign拷貝一份新的賦值給一個變量,然后修改這個變量,傳遞給父組件,代碼如下:
let demo1 = Object.assign({}, this.grpData) demo1.app = 'binge' this.$emit('updateData', demo1)
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK )
這篇文章主要介紹了Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK ),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03vue導出excel和echart圖形分別在不同工作表的實現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實現(xiàn)導出excel和echart圖形分別在不同工作表,文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-10-10vue-router 源碼實現(xiàn)前端路由的兩種方式
這篇文章主要介紹了vue-router 源碼實現(xiàn)前端路由的兩種方式,主要介紹Hash 路由和History 路由,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03