Props 屬性
子元件可以透過 Props 接收來自父元件的輸入。首先，子元件需要宣告它所接收的 Props：
<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
msg: String
})
</script>
|
注意，defineProps() 是一個編譯時的巨集，不需要額外匯入。一旦宣告後，msg Prop 就可以在子元件的模板中使用，也可以透過 defineProps() 返回的物件在 JavaScript 中存取。
父元件可以像設定屬性一樣，將 Prop 傳遞給子元件。若要傳遞動態值，也可以使用 v-bind 語法：
<template>
<ChildComp :msg="greeting" />
</template>
|
我們現在在編輯器中試試看吧！
App.vue<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
const greeting = ref('Hello from parent')
</script>
<template>
<ChildComp :msg="greeting" />
</template>
|
ChildComp.vue<script setup>
const props = defineProps({
msg: String
})
</script>
<template>
<h2>{{ msg || 'No props passed yet' }}</h2>
</template>
|
Comments