vue3_ts_defineProps的使用
一、defineProps在js中的使用
// js setup
const props = defineProps(
{
name:{
type: String,
default: '张三', // 设置默认值
// required: true // 设置必传
}
}
)
二、defineProps在ts中的使用
// 1.ts setup
const props = defineProps<{
name:string,
age:number
}>()
// 2.设置默认值,使用withDefaults方法,第二个参数可配置默认值
const props = withDefaults(
defineProps<{
name?:string,
age:number
}>(),
{
name = '张三'
}
)
三、defineProps简写(解构)
// 1.因为解构目前在实验阶段,故需要在vue.config.js中启用
export default defineConfig({
plugins: [vue({
reactivityTransform: true // 启用defineProps解构,因为解构方法目前在实验阶段
})],
})
// 2.在vue ts setup中使用
const { name = '张三' } = defineProps<{
name?:string
age:number
}>()