重慶分公司
重慶分公司
Vue2.0中怎么實(shí)現(xiàn)數(shù)據(jù)的雙向綁定-創(chuàng)新互聯(lián)
這篇文章給大家介紹Vue2.0中怎么實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過(guò)13年的服務(wù)器租用、
川西大數(shù)據(jù)中心、云服務(wù)器、虛擬空間、網(wǎng)站系統(tǒng)開(kāi)發(fā)經(jīng)驗(yàn)，已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專(zhuān)業(yè)提供云主機(jī)、虛擬空間、空間域名、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。
實(shí)現(xiàn)組件雙向數(shù)據(jù)綁定
在上一節(jié)中最后的示例使用的是Vue 1.0版本中的 .sync 實(shí)現(xiàn)數(shù)據(jù)雙向綁定。那我們先來(lái)看看拋棄 .sync 修飾符來(lái)實(shí)現(xiàn)組件雙向數(shù)據(jù)綁定的工作： 通過(guò)Vue提供的機(jī)制，繞開(kāi)直接修改 prop 來(lái)實(shí)現(xiàn)組件雙向數(shù)據(jù)綁定 。
其思路大致是這樣：
在數(shù)據(jù)渲染時(shí)使用 prop 渲染數(shù)據(jù)
將 prop 綁定到子組件自身的數(shù)據(jù)上，修改數(shù)據(jù)時(shí)修改自身數(shù)據(jù)來(lái)替代 prop
watch 子組件自身數(shù)據(jù)的改變，觸發(fā)事件通知父組件更改綁定到 prop 的數(shù)據(jù)
這樣做的好處是： 父組件數(shù)據(jù)改變時(shí)，不會(huì)修改存儲(chǔ) prop 的子組件數(shù)據(jù)，只是以子組件數(shù)據(jù)為媒介，完成對(duì) prop 的雙向修改 。
繼續(xù)拿上一節(jié)的示例來(lái)舉例，只不過(guò)接下來(lái)的示例，并沒(méi)有使用 .sync 來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定的效果。
修改的代碼如下：
父組件Parent數(shù)據(jù)
-
{{ name }}
-
{{ age }}
name = val" @update:my-age="val => age = val">
子組件child數(shù)據(jù)
-
{{ myName }}
-
{{ myAge }}
在上面的這個(gè)示例中，我們并沒(méi)有使用 .sync 修飾符，但在調(diào)用子組件的時(shí)候使用了 @update ：
name = val" @update:my-age="val => age = val">
子組件中渲染到HTML模板的數(shù)據(jù)是用的 prop 數(shù)據(jù)，但監(jiān)聽(tīng) input 是使用的子組件自身定義的數(shù)據(jù)作為 v-model 。這樣一來(lái)就不會(huì)直接修改 prop 。簡(jiǎn)單來(lái)說(shuō)， 一切 prop 的改變從本質(zhì)上來(lái)說(shuō)都由父組件完成 。JavaScript的代碼如下：
let parent = new Vue({
el: '#app',
data () {
return {
name: 'w3cplus',
age: 7
}
},
components: {
'child': {
template: '#child',
props: ['myName', 'myAge'],
data () {
return {
childMyName: this.myName,
childMyAge: this.myAge
}
},
watch: {
childMyName: function (val) {
this.$emit('update:my-name', val)
},
childMyAge: function (val) {
this.$emit('update:my-age', val)
}
}
}
}
})最終效果如下：
上面的示例效果，不管是修改父組件的數(shù)據(jù)還是子組件的數(shù)據(jù)，都會(huì)相互影響：
因?yàn)樽咏M件中 props 的 myName 和 myAge 不可寫(xiě)，所以在 data 中創(chuàng)建一個(gè)副本 childMyName 和 childMyAge 。初始值為 props 屬性 myName 和 myAge 的值，同時(shí)在組件內(nèi)所有需要調(diào)用 props 的地方調(diào)用 data 中的 childMyName 和 childMyAge 。
components: {
'child': {
template: '#child',
props: ['myName', 'myAge'],
data () {
return {
childMyName: this.myName,
childMyAge: this.myAge
}
},
...
}
}接下來(lái)在子組件中通過(guò) watch 來(lái)對(duì) props 屬性的 myName 和 myAge 進(jìn)行監(jiān)聽(tīng)。當(dāng) props 修改后對(duì)應(yīng) data 中的副本 childMyName 和 childMyAge 也要同步數(shù)據(jù)。
...
watch: {
childMyName: function (val) {
this.$emit('update:my-name', val)
},
childMyAge: function (val) {
this.$emit('update:my-age', val)
}
}
...接下來(lái)要做的事情就是當(dāng)組件內(nèi)的 props 屬性發(fā)生變化時(shí)，需要向組件外（父組件）發(fā)送通知，通知組件內(nèi)屬性變更，然后由外層（父組件）自己來(lái)決定是否變更他的數(shù)據(jù)。
接下來(lái)我們按上面的方案來(lái)改造上一節(jié)示例中的switch按鈕。
至此，實(shí)現(xiàn)了組件內(nèi)部數(shù)據(jù)與組件外部的數(shù)據(jù)的雙向綁定，組件內(nèi)外數(shù)據(jù)的同步。簡(jiǎn)而言之： 組件內(nèi)部自已變了告訴外部，外部決定要不要變更 。
什么樣的 props 適合做雙向綁定
事實(shí)上，在Vue中，雙向綁定的 props 是不利于組件間的數(shù)據(jù)狀態(tài)管理，尤其是較為復(fù)雜的業(yè)務(wù)當(dāng)中，因此在實(shí)際項(xiàng)目中應(yīng)該盡量少用雙向綁定，過(guò)于復(fù)雜的數(shù)據(jù)處理，建議使用 Vuex 。但很多時(shí)候又避免不了使用雙向綁定。那么什么場(chǎng)景之下使用 props 來(lái)做雙向綁定呢？
如果在你的項(xiàng)目中，同時(shí)滿(mǎn)足下面的條件時(shí)，我們就可以考慮使用 props 來(lái)做雙向綁定：
雖然上面的示例展示了我們?cè)趺丛赩ue 2.0中實(shí)現(xiàn) props 的雙向綁定，但如果項(xiàng)目中有更多這樣的雙向綁定，那么就會(huì)讓你做一些重復(fù)的事情，而且代碼也很冗余，事情也會(huì)變得復(fù)雜。為了改變這樣的現(xiàn)象，可以借助Vue的 mixin 來(lái)自動(dòng)化處理 props 的雙向綁定的需求。不過(guò)在這節(jié)中，我們不會(huì)學(xué)習(xí)這方面的知識(shí)，后面我們?cè)趯W(xué)習(xí) mixin 時(shí)，可地再回過(guò)頭來(lái)實(shí)現(xiàn)這樣的功能。
關(guān)于Vue2.0中怎么實(shí)現(xiàn)數(shù)據(jù)的雙向綁定就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
本文題目：Vue2.0中怎么實(shí)現(xiàn)數(shù)據(jù)的雙向綁定-創(chuàng)新互聯(lián)
分享路徑：http://weahome.cn/article/dpighi.html
