Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
父子組件之間的數(shù)據(jù)關(guān)系，我這邊將情況具體分成下面4種：
父組件修改子組件的data，并實(shí)時(shí)更新
子組件通過$emit傳遞子組件的數(shù)據(jù)，this.$data指當(dāng)前組件的data(return{...})里的所有數(shù)據(jù)，
this.$emit('data',this.$data);
之后通過父組件的getinputdata方法來接收數(shù)據(jù)
@data='getinputdata'
其中的data就是傳過來的數(shù)據(jù)，通過修改這個(gè)數(shù)據(jù)就可以通過父組件實(shí)時(shí)更新子組件
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，修改但不實(shí)時(shí)更新
1. 子組件將父組件通過props傳遞的數(shù)據(jù)，再把props的值賦給let或var聲明變量，之后使用這個(gè)變量就可以了。
let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);
2. 子組件將父組件通過props傳遞的數(shù)據(jù)，再把props的值賦給data(return{...})里的變量，之后使用這個(gè)變量就可以了。
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，修改但不實(shí)時(shí)更新
這邊的方法和‘子組件獲取父組件的data，修改但不實(shí)時(shí)更新'的方法一樣，其中只有傳值的方式有區(qū)別。子組件通過$emit把值傳給父組件。
以上這篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
progressbar組件在一個(gè)可以直接運(yùn)行的npm包，通過Yeoman進(jìn)行構(gòu)建，再通過Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進(jìn)度條progressbar組件2018-04-04
Vue axios 中提交表單數(shù)據(jù)(含上傳文件)
本篇文章主要介紹了Vue axios 中提交表單數(shù)據(jù)(含上傳文件)，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
Vue Router根據(jù)后臺(tái)數(shù)據(jù)加載不同的組件實(shí)現(xiàn)
本文主要介紹了根據(jù)用戶所購買服務(wù)的不同，有不同的頁面展現(xiàn)。文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3.0中Ref與Reactive的區(qū)別示例詳析
在vue3中對(duì)響應(yīng)式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,這篇文章主要給大家介紹了關(guān)于Vue3.0中Ref與Reactive區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-07-07
VUE實(shí)現(xiàn)一個(gè)Flappy Bird游戲的示例代碼
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)Flappy Bird的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法
這篇文章主要介紹了Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue項(xiàng)目是如何運(yùn)行起來的，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐
這篇文章主要介紹了詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Vue中的計(jì)算屬性computed傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過的坐標(biāo)實(shí)現(xiàn)方法
在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過的坐標(biāo)呢？下面通過本文給大家分享實(shí)現(xiàn)步驟，感興趣的朋友跟隨小編一起看看吧2021-11-11