淺談vue父子組件怎么傳值
更新時間：2018年07月21日 09:12:52 作者：yali
這篇文章主要介紹了淺談vue父子組件怎么傳值,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
背景：最近在做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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
路由守衛(wèi)又稱導航守衛(wèi)，指是路由跳轉前、中、后過程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02
Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK )
這篇文章主要介紹了Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK ),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue導出excel和echart圖形分別在不同工作表的實現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實現(xiàn)導出excel和echart圖形分別在不同工作表,文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue使用Post進行表單提交，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了mpvue全局引入sass文件的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue-router 源碼實現(xiàn)前端路由的兩種方式
這篇文章主要介紹了vue-router 源碼實現(xiàn)前端路由的兩種方式，主要介紹Hash 路由和History 路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue組件之間進行傳值的方法，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03