Vue 中的雙向綁定

上一節(jié)中我們已經(jīng)討論過(guò)Vue中并沒(méi)有真正的雙向綁定。Vue中的 props等數(shù)據(jù)是單向流動(dòng)的，由父級(jí)至子級(jí)向下綁定的，即：每次父組件更新時(shí)，子組件中的所有 props 都會(huì)刷新為最新的值。如果在子組件中修改 props ，Vue會(huì)向你發(fā)出一個(gè)警告，且并不能通過(guò)修改子組件的數(shù)據(jù)來(lái)更改父組件的數(shù)據(jù)）。

如果有需求，我們可以在父組件中，子組件的標(biāo)簽上聲明一個(gè)監(jiān)聽(tīng)事件，在子組件想要修改數(shù)據(jù)時(shí)使用$emit觸發(fā)事件并傳入新的值，通知父組件進(jìn)行修改。這就可以實(shí)現(xiàn)某種程度上的雙向綁定。

真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以變更父組件，且在父組件和子組件兩側(cè)都沒(méi)有明顯的變更來(lái)源。Vue 團(tuán)隊(duì)推薦以 update:myPropName 的模式觸發(fā)事件取代直接修改的操作。這就用到了 .sync 修飾符。

Vue 中的 .syc 修飾符

自定義組件中，v-bind命令的 .sync 修飾符同 v-model 一樣，其實(shí)本質(zhì)上都是Vue的語(yǔ)法糖，用于實(shí)現(xiàn)父子組件間接的數(shù)據(jù)雙向綁。需要注意的一點(diǎn)是，Vue3 中已經(jīng)不再有 .sync 修飾符了，新的 v-model 取代了 Vue2 中的 v-model 和 .sync 修飾符。本文作為 Vue 入門(mén)的心得總結(jié)，這里討論的是 Vue2中 的 .sync 修飾符。

一言以蔽之，v-bind命令的.sync 修飾符實(shí)質(zhì)就是父組件監(jiān)聽(tīng)子組件更新某個(gè)props的請(qǐng)求的縮寫(xiě)語(yǔ)法，一種語(yǔ)法糖。

如：

<Child v-bind:title.sync="title" />

完全等價(jià)于：

<Child
  v-bind:title="title"
  v-on:update:title="title = $event"
></Child>

與之配合，在子組件中，需要添加下面這段代碼來(lái)通知父組件對(duì)這個(gè)prop重新賦值：

this.$emit('update:title', newTitle)

這一個(gè) $emit 可以通過(guò)綁定事件觸發(fā)，也可以使用 watch 監(jiān)聽(tīng)等方式來(lái)觸發(fā)。

此外，當(dāng)我們用一個(gè)對(duì)象 obj 同時(shí)設(shè)置多個(gè) prop 的時(shí)候，也可以將這個(gè) .sync 修飾符和 v-bind 配合使用：

<Son v-bind.sync="obj"></Son>

data(){
        return {
            obj:{read:true, name:'', title:'', length:''}
        }
    },

這樣會(huì)把 obj 對(duì)象中的每一個(gè) property (如 title) 都作為一個(gè)獨(dú)立的 prop 傳進(jìn)去，然后各自添加用于更新的 v-on 監(jiān)聽(tīng)器。

.sync 使用注意事項(xiàng)

需要注意，帶有 .sync 修飾符的 v-bind命令 不能 和表達(dá)式一起使用
(例如 :title.sync=”doc.title + ‘!’” 是無(wú)效的)。

你只能提供你想要綁定的 property 名，類(lèi)似 v-model。

另外還需要注意將 v-bind.sync 用在一個(gè)字面量的對(duì)象上，例如 v-bind.sync=”{ title: doc.title }”，是無(wú)法正常工作的，因?yàn)樵诮馕鲆粋€(gè)像這樣的復(fù)雜表達(dá)式的時(shí)候，有很多邊緣情況需要考慮。

.sync 與 v-model的比較

.sync 從功能上看和 v-model 十分相似，都是為了實(shí)現(xiàn)數(shù)據(jù)的“雙向綁定”，本質(zhì)上，也都不是真正的雙向綁定，而是語(yǔ)法糖，這是他們的相同之處。

但相比較之下，.sync 更加靈活，它可以在一個(gè)組件內(nèi)給多個(gè) prop 使用，而 v-model 在一個(gè)組件中只能有一個(gè) prop ，在 Vue2 中是這樣。

需要注意，Vue3中 v-model 已經(jīng)可以給多個(gè)prop使用了 

從語(yǔ)法的內(nèi)容來(lái)看，v-model 綁定的值和觸發(fā)的事件是較為固定的，根據(jù)不同類(lèi)型的特定組件有對(duì)應(yīng)的綁定值和事件，比如 input 組件，select 組件等表單組件，日期時(shí)間選擇組件，顏色選擇器組件等，這些組件所綁定的值使用 v-model 比較合適。

其他情況下，需要父子組件之間數(shù)據(jù)相互更新，還是使用 .sync。.sync 針對(duì)更多的是各種的狀態(tài)變更，在父子組件之間互相傳遞，是一種 update 操作。

以上就是Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue修飾符.sync v-model的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論