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

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

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

// サブコンポーネント <テンプレート>
  <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')
    }
    戻る {
      子供たちだが、
    }
  }
}
</スクリプト>