vue3 setup如何使用props

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。
他接受两个参数：

{Data} props{SetupContext} context

在setup里边，第一个参数就是props，下面来看示例。
子组件propsTest.vue：

<script lang="ts">import{ toRefs}from'vue'interfaceData{[key:string]:unknown}exportdefault{     props:{         text:{             type:String,default:""},         message:Number},setup(props:Data){const{text}=toRefs(props)const formatText=`Hi,${text.value}`return{             formatText}}}</script><template><div>{text}}<!-- hello world-->{{formatText}}<!-- Hi,hello world-->{{message}}<!--233--></div></template>

父组件index.vue:

<script lang="ts">import{ ref}from"vue"import PropsTestfrom'./propsTest.vue'exportdefault{     components:{PropsTest},setup(){const message= ref<number>(233)return{             message}},}</script><template><div><PropsTest text="hello world":message="message"></PropsTest></div></template>

如果有同学喜欢用setup语法糖，那么需要用defineProps（defineProps是编译器宏，无需引入）定义props，那么咱们修改一下子组件propsTest.vue：

<script setup lang="ts">import{ toRefs}from'vue'const props=defineProps({     text:String,     message:Number})const{text}=toRefs(props)const formatText=`Hi,${text&&text.value}`</script><template><div>{{text}}<!-- hello world-->{{formatText}}<!-- Hi,hello world-->{{message}}<!--233--></div></template>