父から息子へ: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がパラメータを渡すためにさまざまなフックを呼び出す必要があることです。 以下もご興味があるかもしれません:
|
<<: Docker ベースの Selenium 分散環境の構築
>>: MySQL インポート csv エラーの 4 つの解決策
前面に書かれた環境: MySQL 5.7+、MySQL データベースの文字エンコードは utf8、テ...
マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...
目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...
ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...
リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...
結果: html <canvas id="スターフィールド"><...
目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...
大規模な開発に Docker を使用する場合でも、クリーンアップ戦略がなければ、ディスクがすぐにいっ...
目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...
質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...
同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...
Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...