Vue3 子组件定义默认值withDefaults
Vue3 子组件定义默认值withDefaults
·
- 如果父组件为传递子组件数据, 子组件可以使用withDefaults定义默认值
父组件
<template>
<div>
<PageData :num="num" name="传给子组件的值"></PageData>
</div>
</template>
<script setup lang="ts">
import PageData from './pages/page.vue'
import { reactive } from 'vue'
const num = reactive<number[]>([1,2,3]) // 传递给子组件
</script>
<style scoped>
</style>
子组件
<template>
<div>
子组件: {{name}}
<div v-for="(item, index) in num" :key="index">{{item}}</div>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
// ts
type Props = {
name?:string,
num?:number[]
}
// withDefaults 定义默认值
withDefaults(defineProps<Props>(), {
name: 'zs',
num: () => [12,13,14] // 复杂数据类型使用函数方式
})
</script>
<style scoped>
</style>
更多推荐
所有评论(0)