vue3 setup使用props

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

{Data} props
{SetupContext} context

在setup里边，第一个参数就是props，下面来看示例。

子组件propsTest.vue：

<script lang="ts">
import { toRefs } from 'vue'
export default {
    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 PropsTest from './propsTest.vue'
export default {
    components:{PropsTest},
    setup(){
        const message = ref<number>(233)
        return {
            message
        }
    },
}
</script>
<template>
    <div>
        <PropsTest text="hello world" :message="message"></PropsTest>
    </div>
</template>

setup语法糖（<script 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>