- 如果父组件为传递子组件数据， 子组件可以使用withDefaults定义默认值
父组件文章来源：https://www.toymoban.com/news/detail-510520.html
<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>
子组件文章来源地址https://www.toymoban.com/news/detail-510520.html
<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>
到了这里，关于Vue3 子组件定义默认值withDefaults的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
