Emits

除了接收 props，子組件還可以向父組件觸發事件：

<script setup>
// 聲明觸發的事件
const emit = defineEmits(['response'])

// 帶參數觸發
emit('response', 'hello from child')
</script>

emit() 的第一個參數是事件的名稱。其他所有參數都將傳遞給事件監聽器。
父組件可以使用 v-on 監聽子組件觸發的事件

<ChildComp @response="(msg) => childMsg = msg" />

實作

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')
</script>

<template>
  <ChildComp />
  <p>{{ childMsg }}</p>
</template>

完成

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')
const emit = defineEmits(['response'])
emit('response','hello from child')
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg"/>
  <p>{{ childMsg }}</p>
</template>

插槽

除了通過 props 傳遞數據外，父組件還可以通過插槽 (slots) 將模板片段傳遞給子組件：

<ChildComp>
  This is some slot content!
</ChildComp>

在子組件中，可以使用 slot 元素作為插槽出口 (slot outlet) 渲染父組件中的插槽內容 (slot content)：
slot插口中的內容將被當作“默認”內容：它會在父組件沒有傳遞任何插槽內容時顯示：

<slot>Fallback content</slot>

實作

利用父組件的 msg 狀態為子組件提供一些插槽內容吧。

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp></ChildComp>
</template>

完成

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>