Vue で .sync 修飾子を使用する方法

今回は、vue で .sync 修飾子を使用する方法と、vue で .sync 修飾子を使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

場合によっては、プロップ (データを渡す親子コンポーネントの

プロパティ) に対して「双方向バインディング」を実行する必要がある場合があります。

vue 1.x の .sync 修飾子によって提供される関数。子コンポーネントが .sync を使用して prop の値を変更すると、その変更は親コンポーネントにバインドされている値にも同期されます。

これは便利ですが、一方向のデータ フローが中断されるため、問題が発生する可能性もあります。 (データは上から下へ、イベントは下から上へ流れます)

サブコンポーネントのpropを変更するコードは通常の状態変更のコードと変わらないので、サブコンポーネントのコードだけを見ると、それについてはわかりません。適切な場合は、親コンポーネントの

状態 が静かに変更されます。

これにより、複雑な構造を持つアプリケーションをデバッグする際に、高いメンテナンスコストが発生します。そこで、vue 2.0 では .sync を削除しました。

しかし、実際のアプリケーションでは、再利用可能なコンポーネント ライブラリを開発する場合など、.sync にはまだアプリケーションがあることがわかります。 (バカ○△○)

後は、子コンポーネント内で親コンポーネントの状態を変更するコードを区別しやすくするだけです。

そこで、vue 2.3.0 から .sync 修飾子を再導入しましたが、今回はコンパイル時の構文糖としてのみ存在します。これは、親コンポーネントのプロパティを自動的に更新する v-on リスナーに自動的に展開されます。

例:

<child></child> 就会被扩展为： <child> bar = val”>  （@是v-on的简写）</child>

サブコンポーネントが foo の値を更新する必要がある場合、更新イベントを明示的にトリガーする必要があります: this.$emit(“update:foo”, newValue);

初期状態:

クリック後の状態:

原理は、親コンポーネントが

関数 を子コンポーネントに渡すことです: function (newValue) { this.msg = newValue }; >function (newValue) { this.msg = newValue; }

当使用一个对象一次性设置多个属性的时候，这个 .sync 修饰符也可以和 v-bind 一起使用。

例如：  <child v-bind.sync="“{" message: msg uc: uc></child>   

オブジェクト

複数の属性を一度に設定する場合、この .sync 修飾子は v-bind と併用することもできます。

例: <child v-bind.sync="“{" message: msg uc: uc></child>&gt> (:.sync="{ として記述することはできません) *** ******}"、そうでない場合はエラーが報告されます)<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/52a6fe9df1b17a3daa59fc4a3daa331a-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/52a6fe9df1b17a3daa59fc4a3daa331a-7.png?x-oss-process=image/resize,p_40" class="lazy" alt="">この例では、メッセージと uC への更新を同時に行う v-on リスナーを追加します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:

JQuery 要素の検索と操作方法

🎜🎜nodeJS モジュールの使用方法🎜🎜🎜

以上がVue で .sync 修飾子を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。