在Vue3.0中,將移除v-bind的.sync修飾符使用帶參數的v-model替代。
<MyComponent v-bind:title.sync="title" />
替代語法為:
<MyComponent v-model:title="title">
動機
在Vue2.x中,v-bind.sync可能會造成一些困惑,很多人認為它和v-bind一樣,但實際上並不是這樣的。
認為
v-bind:title.sync="title"像一個普通的屬性綁定帶有一點額外的功能是錯誤的理解,因為雙向綁定和單向綁定本質上是不同的,sync修飾符的工作原理實際上和v-model是相似的,他是一個創建雙向綁定的語法糖。主要區別在於它可以在同一個組件上進行多個雙向綁定,而不是僅限於一個。
應用示例
在元素上使用
<!-- 簡寫 -->
<input v-model="xxx">
<!-- 完整語法 -->
<input :model-value="xxx" @update:model-value="newValue => { xxx = newValue }">
<input v-model:aaa="xxx">
<!-- 無效語法 編譯報錯 -->
在組件上使用
<!-- 簡寫 -->
<MyComponet v-model="xxx">
<!-- 完整語法 -->
<MyComponent :model-value="xxx" @update:model-value="newValue => { xxx = newValue }">
<!-- 簡寫 -->
<MyComponent v-model:aaa="xxx">
<!-- 完整語法 -->
<MyComponent :aaa="xxx" @update:aaa="newValue => { xxx = newValue }">
