Vue3中 v-model的用法


在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 }">


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM