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')
    }
    戻る {
      子供たちだが、
    }
  }
}
</スクリプト>