欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法

 更新時(shí)間：2018年03月01日 15:48:39   作者：dream_葉挺  
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

父子組件之間的數(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)文章

最新評論