vue3学习笔记-setup中使用ts定义了接口类型后设置默认值

---

前言

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="'女'"/>

页面输出：

---