Vue3 親子コンポーネントパラメータ転送における sync 修飾子の使用法の詳細な説明

一方向データフローの説明

一方向のデータフロー（ヒープは変更できますが、スタックは変更できません）

親から子に渡されるデータは一方向のデータフローであることは誰もが知っています。つまり、子コンポーネントは親コンポーネントから渡された値を直接変更することはできません。

しかし実際には、値を変更する場合、真実は次のようになります。基本データ型は変更できませんが、複合データ型は参照アドレス（スタック）を変更せず、その値は自由に変更できます。

Vue2.x の使用法

親コンポーネントに変更を通知するイベントのフォームを定義します

これが最も基本的な使い方です: props+$emit

書き方：

.sync と update の使用:

親コンポーネントが値を渡すときは、変数の後に.syncを追加するだけです。

子コンポーネントthis.$emit("update:變量", 實參)親コンポーネントから渡された値を変更できます。

書き方：

親から子へ、複数のデータを渡すための省略形

子コンポーネントに渡される値が複数のデータである場合、 v-bindを使用して 1 つのオブジェクトに複数のデータを直接含めることができます。

注: v-bind.sync="doc";

子コンポーネントに渡されるのは doc オブジェクトではありません。

しかし、オブジェクト内のすべての属性。

書き方：

v-model の略語を使用する (厳格な要件)

親コンポーネント: v-model 、子コンポーネント: 受け取った変数はvalueでなければならず、$emit によって送信されたイベントはinputでなければなりません。

書き方：

Vue3.x の使用法

v-modelを使用すると、2.xと比較して、コンポーネントで複数のv-modelを使用できるようになりました。これは、Vue2.x修飾子の使用です。

一般的な使用法

親コンポーネントを渡すときはv-modelを使用し、子コンポーネントを変更するときはemit("uodate: num", 實參)を使用します。

書き方：

略語

親コンポーネントから子コンポーネントに渡される変数の名前がmodelValueの場合、このメソッドを使用できます。

書き方：

上記は、Vue3親子コンポーネントのパラメータ受け渡しにおけるsync修飾子の使用方法の詳細説明の詳細な内容です。Vue3親子コンポーネントのパラメータ受け渡しの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。