Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

vモデル

    <!--親コンポーネント-->
    <テンプレート>
        <!--v-model ディレクティブは構文糖衣です-->
        <子 v-model="モデル"></子>
        <!-- v-model ディレクティブを展開すると、次のコードと同じになります -->
        <!-- v-model バインディングのデフォルト イベントは input で、デフォルトのプロパティは value 属性です -->
        <子:value="モデル" @input="モデル = $イベント"></子>
    </テンプレート>

子コンポーネントのモデルオプションを使用して、v-model バインディングのデフォルトのイベントと prop カスタムプロパティを変更することもできます。

 //サブコンポーネントエクスポートデフォルト{
  モデル： {
         プロパティ: 'チェック済み'、
         イベント: '変更'
     }
 }

したがって、対応する親コンポーネントが v-model を使用する場合の同等の操作は次のようになります。

    <テンプレート>
        <Child :checked="モデル" @change="モデル = $event"></Child>
    <テンプレート>

v-modelは通常、フォームコントロールに使用されます。これにより、コンポーネントの制御機能が強化されるためです。

.sync

   <!-- 親コンポーネント -->
    <テンプレート>
        <!-- .sync は v2.4 で追加されました。これを使用して、子コンポーネントに渡されるプロパティを変更できます -->
        <Child:xxx.sync="モデル"></Child>
        <!-- 次のコードと同等 -->
        <Child :xxx = "モデル" @update:xxx = "モデル = $event"></Child>
    </テンプレート>
    <!-- 子コンポーネント -->
    <input :value="xxx" @input = "$emit('update:xxx', $event.target.value)"/>

ここでバインドされている属性名 xxx は変更可能であり、対応する属性名も変更されます。

    <!-- 親コンポーネント -->
    <テンプレート>
        <子:foo.sync="モデル"></子>
    </テンプレート>
    <!-- 子コンポーネント -->
    <input :value = "foo" @input = "$emit('update:foo', $event.target.value)"/>

.sync の原則では、子コンポーネントの $emit メソッドを使用して、親コンポーネントにイベントを送信します。その適用シナリオは、子コンポーネントが親コンポーネントから渡されたプロパティを変更することです。

.sync修飾子の制御機能はすべて親コンポーネントにあり、イベント名は比較的固定されたupdate:xxxです。

これら 2 つは本質的に同じであり、違いはありません:「トリガーイベントをリッスンする」=「(val) => value = val」。

微妙な違い

1. ただし、v-model はデフォルトで input や textarea などのコンポーネントの入力イベントに対応しています。この input イベントを子コンポーネントで置き換えた場合、その本質は .sync 修飾子とまったく同じです。比較的単純で、複数持つことはできません。

// サブコンポーネントは、デフォルトで v-model に対応するネイティブ入力イベントを置き換えるためにカスタムイベントを使用できますが、サブコンポーネントで手動で $emit を実行する必要があります。
モデル： {
        プロパティ: "値",
        イベント: 「更新」
},

コンポーネントは複数のプロパティで .sync 修飾子を使用でき、コンポーネントが 1 つのプロパティしか持てない v-model とは異なり、複数の「プロパティ」を同時に双方向にバインドできます。

機能シナリオを要約します。

1. v-model は、最終的な操作結果、双方向バインディングの結果、値、および変更操作に重点を置いています。
たとえば、入力ボックスの値、複数選択ボックスの値リスト、ツリー構造の ID 値リスト (ant デザインと要素の両方) などです。
2..sync は、より多様な状態、状態の相互伝達、ステータス、更新操作を目的としています。
たとえば、コンポーネントの読み込みステータス、サブメニューやツリー構造の展開リスト（ステータスの一種）、フォームコンポーネントの内部検証ステータスなどです。

ただし、例外もあります。つまり、v-model は一部の .sync 状況を置き換えることもできます。これは、このコンポーネントの唯一の機能が状態を切り替えることであり、この状態が最終的な操作値である場合です。このとき、.sync 修飾子を置き換えることができます。双方向バインディングの 2 つの異なる方法を使用すると、コンポーネントの構造をすばやく理解できます。

以下もご興味があるかもしれません: