Vue.jsでslot経由の子コンポーネントから親コンポーネントに値を返すプログラムに挑戦します！

<!-- 子コンポーネント (B) -->
<template>
    <div>
      <!-- スロットを表示 -->
      <slot></slot>
    </div>
  </template>
  
  <script setup>
 
  </script>

<!-- 子コンポーネント (C) -->
<template>
    <div>
      <!-- 子から親にデータを渡すためのボタン -->
      <button @click="sendDataToParent">Send Data to Parent</button>
    </div>
  </template>
  
  <script setup>
  const props = defineProps({
    callbackFromChild: Function, // 親から渡されるメソッドの型を指定
  });

  // 子から親に渡すデータを定義
  const dataToSend = 'Hello from child!';
  
  // 子から親にデータを送信するメソッド
  const sendDataToParent = () => {
    // 親コンポーネントで定義したメソッドを呼び出す
    props.callbackFromChild(dataToSend);
  };
  </script>

<!-- 親コンポーネント (A) -->
<template>
    <div>
      <!-- コンポーネント B を呼び出し、スロット内にコンポーネント C を設置 -->
      <ComponentB>
        <ComponentC :callbackFromChild="handleCallback" />
      </ComponentB>
    </div>
  </template>
  
  <script setup>
  import ComponentB from '@/components/ComponentB.vue'; // ComponentB のインポート
  import ComponentC from '@/components/ComponentC.vue'; // ComponentC のインポート
  
  // 親コンポーネントでメソッドを定義
  const handleCallback = (dataFromChild) => {
    console.log('コンポーネントCからの値を受け取りました:', dataFromChild);
    // ここで親コンポーネントの処理を実行
  };
  </script>