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

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

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

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

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

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

Vue2.x の使用法

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

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

書き方:

ここに画像の説明を挿入

.sync と update の使用:

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

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

書き方:

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-BZtIWKTt-1631881175196) (インタビューの質問が整理されました。assets/image-20210917190128935.jpg)]

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

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

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

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

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

書き方:

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-3yidmVZ0-1631881175197) (インタビューの質問が整理されました。assets/image-20210917191523433.jpg)]

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

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

書き方:

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-GT15QqZz-1631881175199) (インタビューの質問が整理されました。assets/image-20210917201832481.jpg)]

Vue3.x の使用法

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

一般的な使用法

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

書き方:

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-vQ1lQFal-1631881175199) (インタビューの質問が整理されました。assets/image-20210917193019726.jpg)]

略語

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

書き方:

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-4513r0bT-1631881175200) (インタビューの質問が整理されました。assets/image-20210917194125901.jpg)]

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

以下もご興味があるかもしれません:
  • Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明
  • Vueのsync修飾子の詳細な説明
  • VUE カスタム コンポーネントで .sync 修飾子と v-model を使用する違いの詳細な説明
  • vue.sync 修飾子の使用に関する詳細な説明
  • Vue の .sync 修飾子の例の詳細な説明
  • Vue の .sync 修飾子の使い方を理解する方法
  • Vue における .sync 修飾子の使用法と原理の分析

<<:  HiveメタデータをMySQLに設定するプロセス全体

>>:  Linux deb パッケージの解凍、変更、その他の操作方法のコード例

推薦する

クロスブラウザの問題に対する 5 つの解決策 (要約)

簡単なレビュー: ブラウザの互換性の問題は、しばしば頭痛の種となります。ここでは、これらの問題を回避...

MySQLのexecute、executeUpdate、executeQueryの違い

execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...

MySql 範囲内の検索時にインデックスが有効にならない理由の分析

1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...

src 属性と href 属性の違い

src と href には違いがあり、混同される可能性があります。 src は現在の要素を置き換える...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

レスポンシブ Web をデザインするにはどうすればいいですか?レスポンシブウェブデザインのメリットとデメリット

最近レスポンシブ デザインについて学んでいて、これについていくつか整理してみました。写真の一部はイン...

vite2.0 設定学習の詳しい説明(typescript 版)

導入悠宇希の原文です。 vite は Vue CLI に似ています。vite も、基本的なプロジェク...

Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決

目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...

MySQLでテーブルを作成し、フィールドコメントを追加する方法

コードと例を直接投稿する #テーブル作成時にコメントを記述する CREATE TABLE useri...

Ubuntu で apt-get を使用して mysql をインストールおよび完全にアンインストールする方法の詳細な説明

1. mysqlをインストールします。 udo apt-getでmysql-serverをインストー...

tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード

目次マルチアプリケーションの展開1-Tomcat 構成1.1- プロジェクト構成1.2-サービス構成...

JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します

この記事の例では、ボタンをクリックすることで4桁のランダムな検証コードを生成するjsの具体的なコード...

Docker ベースの ELK を素早く構築する方法

[概要] この記事では、自作の Docker プラットフォームをベースに完全な ELK システムを素...

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...