Vue重要修飾符.sync對比v-model的區別及使用詳解

2022-07-26 18:02:07

Vue 中的雙向繫結

上一節中我們已經討論過Vue中並沒有真正的雙向繫結。Vue中的 props等資料是單向流動的，由父級至子級向下繫結的，即：每次父元件更新時，子元件中的所有 props 都會重新整理為最新的值。如果在子元件中修改 props ，Vue會向你發出一個警告，且並不能通過修改子元件的資料來更改父元件的資料）。

如果有需求，我們可以在父元件中，子元件的標籤上宣告一個監聽事件，在子元件想要修改資料時使用$emit觸發事件並傳入新的值，通知父元件進行修改。這就可以實現某種程度上的雙向繫結。

真正的雙向繫結會帶來維護上的問題，因為子元件可以變更父元件，且在父元件和子元件兩側都沒有明顯的變更來源。Vue 團隊推薦以 update:myPropName 的模式觸發事件取代直接修改的操作。這就用到了 .sync 修飾符。

Vue 中的 .syc 修飾符

自定義元件中，v-bind命令的 .sync 修飾符同 v-model 一樣，其實本質上都是Vue的語法糖，用於實現父子元件間接的資料雙向綁。需要注意的一點是，Vue3 中已經不再有 .sync 修飾符了，新的 v-model 取代了 Vue2 中的 v-model 和 .sync 修飾符。本文作為 Vue 入門的心得總結，這裡討論的是 Vue2中的 .sync 修飾符。

一言以蔽之，v-bind命令的.sync 修飾符實質就是父元件監聽子元件更新某個props的請求的縮寫語法，一種語法糖。

如：

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

完全等價於：

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

與之配合，在子元件中，需要新增下面這段程式碼來通知父元件對這個prop重新賦值：

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

這一個 $emit 可以通過繫結事件觸發，也可以使用 watch 監聽等方式來觸發。

此外，當我們用一個物件 obj 同時設定多個 prop 的時候，也可以將這個 .sync 修飾符和 v-bind 配合使用：

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

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

這樣會把 obj 物件中的每一個 property (如 title) 都作為一個獨立的 prop 傳進去，然後各自新增用於更新的 v-on 監聽器。

.sync 使用注意事項

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

你只能提供你想要繫結的 property 名，類似 v-model。

另外還需要注意將 v-bind.sync 用在一個字面量的物件上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因為在解析一個像這樣的複雜表示式的時候，有很多邊緣情況需要考慮。

.sync 與 v-model的比較

.sync 從功能上看和 v-model 十分相似，都是為了實現資料的“雙向繫結”，本質上，也都不是真正的雙向繫結，而是語法糖，這是他們的相同之處。

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

需要注意，Vue3中 v-model 已經可以給多個prop使用了

從語法的內容來看，v-model 繫結的值和觸發的事件是較為固定的，根據不同型別的特定元件有對應的繫結值和事件，比如 input 元件，select 元件等表單元件，日期時間選擇元件，顏色選擇器元件等，這些元件所繫結的值使用 v-model 比較合適。

其他情況下，需要父子元件之間資料相互更新，還是使用 .sync。.sync 針對更多的是各種的狀態變更，在父子元件之間互相傳遞，是一種 update 操作。

以上就是Vue重要修飾符.sync對比v-model的區別及使用詳解的詳細內容，更多關於Vue修飾符.sync v-model的資料請關注it145.com其它相關文章！

Vue重要修飾符.sync對比v-model的區別及使用詳解

目錄

Vue 中的雙向繫結

Vue 中的 .syc 修飾符

.sync 使用注意事項

.sync 與 v-model的比較

熱門文章