vue3+ts中组件接收props

在Vue 3和TypeScript组合式API中，接收props的方法如下：

首先，在父组件中定义要传递的props：




<template>
  <ChildComponent :myProp="value" />
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const value = ref('Hello, World!')
</script>

然后，在子组件中使用defineProps函数来定义接收的props：




<template>
  <div>{{ myProp }}</div>
</template>
 
<script setup lang="ts">
const props = defineProps<{
  myProp: string
}>()
</script>

如果你想要为props设置类型并添加一些验证逻辑，可以使用TypeScript的接口：




interface MyProps {
  myProp: string
}
 
const props = defineProps<MyProps>()

确保在<script setup>标签中使用lang="ts"以启用TypeScript支持。

vue3+ts中组件接收props

评论已关闭

推荐阅读