前言
vue3 setup 中使用 inteface 定义了需要的参数类型后设置默认值
一、子组件 child.vue
<script setup lang="ts">
import {defineEmits} from 'vue'
//需要的值
interface Type {
name:string,
age:number,
sex?:string//可传可不传
}
//默认值
const props = withDefaults(defineProps<Type>(), {
sex: () => '男'
})
</script>
<template>
<div>
<p>name:{{ props.name }}</p>
<p>age:{{ props.age }}</p>
<p>sex:{{ props.sex }}</p>
</div>
</template>
二、父组件
1.引用子组件
import child from './child.vue'
2.页面中使用
<child :name="'小明'" :age="18"/>
页面输出:
<child :name="'小明'" :age="18" :sex="'女'"/>
页面输出: