Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
父子組件之間的數(shù)據(jù)關(guān)系，我這邊將情況具體分成下面4種：
父組件修改子組件的data，并實時更新
子組件通過$emit傳遞子組件的數(shù)據(jù)，this.$data指當前組件的data(return{...})里的所有數(shù)據(jù)，
this.$emit('data',this.$data);
之后通過父組件的getinputdata方法來接收數(shù)據(jù)
@data='getinputdata'
其中的data就是傳過來的數(shù)據(jù)，通過修改這個數(shù)據(jù)就可以通過父組件實時更新子組件
getinputdata(data) {
console.log(data);
data.background = {
backgroundColor: 'yellow',
border: 'none'
};
}
子組件修改父組件的data
在子組件中是修改不了父組件的data的，只有通過上面的$emit方法在父組件中修改數(shù)據(jù)。
可參考vue官網(wǎng)的自定義事件：https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6
子組件獲取父組件的data，修改但不實時更新
1. 子組件將父組件通過props傳遞的數(shù)據(jù)，再把props的值賦給let或var聲明變量，之后使用這個變量就可以了。
let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);
2. 子組件將父組件通過props傳遞的數(shù)據(jù)，再把props的值賦給data(return{...})里的變量，之后使用這個變量就可以了。
this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);
可參考vue官網(wǎng)的自定義事件：https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
父組件獲取子組件的data，修改但不實時更新
這邊的方法和‘子組件獲取父組件的data，修改但不實時更新'的方法一樣，其中只有傳值的方式有區(qū)別。子組件通過$emit把值傳給父組件。
以上這篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
一起寫一個即插即用的Vue Loading插件實現(xiàn)
這篇文章主要介紹了一起寫一個即插即用的Vue Loading插件實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼
這篇文章主要介紹了vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue父子模板傳值問題解決方法,結(jié)合案例形式分析了vue.js父子模板傳值問題相關(guān)實現(xiàn)方法與具體操作步驟,需要的朋友可以參考下2020-02-02
使用vis-timeline繪制甘特圖并實現(xiàn)時間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實現(xiàn)時間軸的中文化(案例代碼),本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度
這篇文章主要介紹了vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下2018-11-11
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)多條折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了element?tab標簽管理路由頁面的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08