VUE 页面使用 defineProps 如何友好的给参数赋默认值
Posted 星拾夜暝
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE 页面使用 defineProps 如何友好的给参数赋默认值相关的知识，希望对你有一定的参考价值。
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
>()
以上是关于VUE 页面使用 defineProps 如何友好的给参数赋默认值的主要内容，如果未能解决你的问题，请参考以下文章
Vue 3 defineEmits 打破了 defineProps 类型
解决：使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps‘ is not defined
vue3 中使用 props, emits 并指定其类型与默认值