房子（父組件）包含窗戶和門（子組件）
窗戶和門（子組件）是房子（父組件）的一部分

父組件

<!-- 父組件：比如叫 Home.vue -->
<template><div><h1>這是父組件（房子）</h1><!-- 下面這兩個就是子組件，像插積木一樣插在父組件里 --><WindowComponent />  <!-- 窗戶組件（子組件） --><DoorComponent />    <!-- 門組件（子組件） --></div>
</template>

子組件

<!-- 子組件1：WindowComponent.vue（窗戶） -->
<template><div>我是窗戶（子組件）</div>
</template><!-- 子組件2：DoorComponent.vue（門） -->
<template><div>我是門（子組件）</div>
</template>

父組件給子組件傳數據（父→子）

比如父組件有一個 "蘋果"，想遞給子組件：

<!-- 父組件（Parent.vue） -->
<template><!-- 用 :蘋果="我的蘋果" 把數據傳給子組件 --><ChildComponent :蘋果="我的蘋果" />
</template><script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'// 父組件的蘋果
const 我的蘋果 = ref('紅蘋果')
</script>

子組件

<!-- 子組件（ChildComponent.vue） -->
<template><p>收到父組件的蘋果：{{ 蘋果 }}</p>
</template><script setup>
// 聲明要接收父組件的"蘋果"
const props = defineProps(['蘋果'])
</script>

父組件用 :屬性名="數據" 傳數據
子組件用 defineProps 聲明接收

子組件給父組件傳數據（子→父）

比如子組件想告訴父組件 "蘋果吃完了"：

<!-- 子組件（ChildComponent.vue） -->
<template><!-- 點擊按鈕時，給父組件發消息 --><button @click="$emit('告訴父組件', '蘋果吃完了')">告訴父組件</button>
</template><script setup>
// 聲明要發的消息名稱
defineEmits(['告訴父組件'])
</script>

父組件

<!-- 父組件（Parent.vue） -->
<template><!-- 監聽子組件的消息，收到后執行處理函數 --><ChildComponent @告訴父組件="處理消息" /><p>子組件說：{{ 子組件消息 }}</p>
</template><script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'const 子組件消息 = ref('')// 處理子組件發來的消息
const 處理消息 = (消息內容) => {子組件消息.value = 消息內容
}
</script>

子組件用 $emit('消息名', 內容) 發消息
父組件用 @消息名="處理函數" 接收消息