您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue中如何實(shí)現(xiàn)數(shù)據(jù)的雙向綁定”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue中如何實(shí)現(xiàn)數(shù)據(jù)的雙向綁定”吧!
實(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ù)綁定的效果。
修改的代碼如下:
<div id="app"> <div class="parent"> <h4>父組件Parent數(shù)據(jù)</h4> <ul> <li> <label>姓名:</label> <span>{{ name }}</span> <input type="text" v-model="name" /> </li> <li> <label>年齡:</label> <span>{{ age }}</span> <input type="number" v-model="age" /> </li> </ul> </div> <child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child> </div> <template id="child"> <div class="child"> <h4>子組件child數(shù)據(jù)</h4> <ul> <li> <label>姓名</label> <span>{{ myName }}</span> <input type="text" v-model="childMyName" /> </li> <li> <label>年齡</label> <span>{{ myAge }}</span> <input type="number" v-model="childMyAge" /> </li> </ul> </div> </template>
在上面的這個(gè)示例中,我們并沒(méi)有使用 .sync 修飾符,但在調(diào)用子組件的時(shí)候使用了 @update :
<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>
子組件中渲染到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í)滿足下面的條件時(shí),我們就可以考慮使用 props 來(lái)做雙向綁定:
組件內(nèi)部需要修改 props
組件需要可以由外部在運(yùn)行時(shí)動(dòng)態(tài)控制,而非單純的初始化
組件父部需要讀取組件內(nèi)的狀態(tài)來(lái)進(jìn)行處理
雖然上面的示例展示了我們?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)這樣的功能。
到此,相信大家對(duì)“Vue中如何實(shí)現(xiàn)數(shù)據(jù)的雙向綁定”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。