淺談vue父子組件怎么傳值
更新時間：2018年07月21日 09:12:52 作者：yali
這篇文章主要介紹了淺談vue父子組件怎么傳值,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
背景：最近在做vue的項目，因為頁面的邏輯比較復(fù)雜，代碼量較多，所以就想抽離出一些組件放到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 值復(fù)制給這個變量，然后再修改這個變量，傳遞給父組件，具體見代碼
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue Router路由無法跳轉(zhuǎn)問題匯總,在這里我整理了部分Vue Router路由無法跳轉(zhuǎn)問題,結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue如何動態(tài)獲取當(dāng)前時間問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
在Vue3中使用vue-qrcode庫實現(xiàn)二維碼生成的方法
在Vue3中實現(xiàn)二維碼生成需要使用第三方庫來處理生成二維碼的邏輯,常用的庫有 qrcode和 vue-qrcode,這篇文章主要介紹了在Vue3中使用vue-qrcode庫實現(xiàn)二維碼生成,需要的朋友可以參考下2023-12-12
淺談vue-lazyload實現(xiàn)的詳細(xì)過程
本篇文章主要介紹了淺談vue-lazyload實現(xiàn)的詳細(xì)過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Vue v-for中的 input 或 select的值發(fā)生改變時觸發(fā)事件操作
這篇文章主要介紹了Vue v-for中的 input 或 select的值發(fā)生改變時觸發(fā)事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了vue路由如何實現(xiàn)登錄攔截，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
解決Vue.js由于延時顯示了{(lán){message}}引用界面的問題
今天小編就為大家分享一篇解決Vue.js由于延時顯示了{(lán){message}}引用界面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue項目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問題的解決
這篇文章主要介紹了vue項目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問題的兩種解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04