Vue3 の父子値転送に関する簡単な説明

Vue3 の父子値転送に関する簡単な説明

父から息子へ:

1. 親コンポーネントのサブコンポーネントタグに、サブコンポーネントに渡されるデータ名 = "渡すデータ" を渡します。

ここでは、参考までに、親コンポーネントのデータを次のように定義します: fatherData 、

子コンポーネントが受信する必要があるデータは、sonData として定義されます。

// 親コンポーネント <テンプレート>
  <div class="about">
    {{父データ}}
    <!-- 父から息子へ-->
    <!-- 1. 親コンポーネントのサブコンポーネント タグで、次の内容を渡します: サブコンポーネントに渡されるデータ名 = "渡されるデータ" -->
    <children :sonData="父親のデータ"></children>
  </div>
</テンプレート>
 
<スクリプト>
「@/components/children」から子要素をインポートします。
「vue」から {defineComponent、reactive、toRefs } をインポートします。
エクスポートデフォルトdefineComponent({
  コンポーネント:{
    子供たち、
  },
名前:"について",
設定(){
  定数状態 = リアクティブ({
    父親データ: 「こんにちは」
  })
  戻る {
    ...toRefs(状態)
  }
}
 
})
</スクリプト>

2. サブコンポーネントは引き続きpropsを通じて受け取られ、テンプレートで使用されます。

ほとんどの場合、データは親コンポーネントから子コンポーネントに渡され、このデータに基づいて特定の機能またはリクエストデータが実行されます。

セットアップ フックでは、最初のパラメーター props は親コンポーネントから渡されたデータにアクセスできます。次に、関数内で、データは props を通じて操作されます。親コンポーネントから渡されたデータの名前。

セットアップ関数は、最初のパラメータとして props を受け取ります。props オブジェクトは応答性があります (一方向の親 -> 子)。watchEffect または watch は props の更新を監視し、応答します。 props オブジェクトを分解しないでください。そうすると、応答性が低下します。開発中、props オブジェクトはユーザー空間コードに対して不変であり、ユーザーが props を変更しようとすると警告がトリガーされます。

// サブコンポーネント <テンプレート>
  <div class="children">
    <!-- 3. サブコンポーネント テンプレートでの使用 -->
    {{sonData}}
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前:"子供",
// 2. サブコンポーネントは props:["sonData"] を通じて props を受け取ります。
  セットアップ(props){
    関数 childrenbut(){
      // props.sonData は親コンポーネントから渡されたデータにアクセスできます console.log(props.sonData);
    }
    戻る {
      子供たちだが
    }
  }
}
</スクリプト>

息子から父へ:

1. サブコンポーネントは、セットアップの2番目のパラメータcontext.emitを通じてイベントをトリガーし、子から親への伝達を実現します。

コンテキスト コンテキスト オブジェクト。

// サブコンポーネント <テンプレート>
  <div class="children">
    {{sonData}}
    <!-- 1. トリガーイベント-->
    <button @click="childrenbut">子コンポーネント ボタン</button>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前:"子供",
  セットアップ(プロパティ、コンテキスト){
    関数 childrenbut(){
      console.log(コンテキスト);
      // 2. context.emit を使用して子から親にデータを渡します。 // 最初のパラメーターはメソッド名で、2 番目のパラメーターは渡されるデータです。context.emit("change",'world')
    }
    戻る {
      子供たちだが、
    }
  }
}
</スクリプト>

文脈は構造の形で記述することもできる

// サブコンポーネント <script>
エクスポートデフォルト{
名前:"子供",
  // 構造体を渡した後、emit を直接記述します {emit}
  セットアップ(props,{emit}){
    関数 childrenbut(){
      // context.emit を省略
      出力("change",'world')
    }
    戻る {
      子供たちだが、
    }
  }
}
</スクリプト>

要約する

vue3 では、親から子、子から親のいずれであっても、実際には vue2 と同じです。

考え方はほとんど同じですが、違いはvue3がパラメータを渡すためにさまざまなフックを呼び出す必要があることです。

以下もご興味があるかもしれません:
  • Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明
  • Vue 親子コンポーネントの相互値の転送と呼び出し
  • Vueの7つの値転送メソッドの詳細な説明
  • Vue の親子コンポーネントの値転送の落とし穴
  • vueの子コンポーネントと親コンポーネント間で値を渡す例
  • Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

<<:  Docker ベースの Selenium 分散環境の構築

>>:  MySQL インポート csv エラーの 4 つの解決策

推薦する

MySQL で指定エンコーディングを実装する際の落とし穴について

前面に書かれた環境: MySQL 5.7+、MySQL データベースの文字エンコードは utf8、テ...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

Docker を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...

XHTML 入門チュートリアル: リストタグの使用

リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...

CSS3でシャトル星空のアニメーションを実現

結果: html <canvas id="スターフィールド"><...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

Docker クリーニングの一般的な方法と問題点

大規模な開発に Docker を使用する場合でも、クリーンアップ戦略がなければ、ディスクがすぐにいっ...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...

DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...

MySQLでストアドプロシージャをデバッグする最も簡単な方法

同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...