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>