props

TIP

父组件：自定义属性发送；

子组件：defineProps 接收；

注意：defineProps 在使用的时候无需引入，就可以自动地在 <script setup> 中可用。

1<template>
2  <h2>父组件</h2>
3  <hr/>
4  <child-comp :msg="msg"/>
5</template>
6
7<script lang="ts" name="ParentComp" setup>
8import ChildComp from "@/components/ChildComp.vue";
9import {ref} from 'vue'
10
11let msg = ref('Parent Data')
12</script>

1<template>
2  <h2>子组件</h2>
3  <p> {{ msg }} </p> // [!code error]
4  <p> {{ props.msg }} </p> // [!code warning]
5</template>
6
7<script lang="ts" name="ChildComp" setup>
8let props = defineProps(['msg']) // [!code error]
9let props = defineProps({ // [!code warning]
10  msg: { // [!code warning]
11    type: String, // [!code warning]
12    default: '' // [!code warning]
13  } // [!code warning]
14}) // [!code warning]
15
16console.log('ChildComp', props) // proxy(object) 
17
18// 在script中也可以使用父组件传递过来的数据
19console.log('ParentData', props.msg)
20</script>

:::

props#

props