Vue3 props的withDefaults使用方法

最新推荐文章于 2025-04-16 10:19:48 发布

可乐KL

最新推荐文章于 2025-04-16 10:19:48 发布

阅读量2.4k

点赞数 14

分类专栏： vue3 文章标签：前端 vue3 学习

本文链接：https://blog.csdn.net/m0_49494051/article/details/136185117

版权

vue3 专栏收录该内容

21 篇文章

订阅专栏

文章讲述了在Vue3的ScriptSetup语法中，如何在子组件中使用withDefaults定义props的问题，以及两种可能的写法。作者对withDefaults在编译时的行为和实际运行时的差异进行了探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

withDefaults使用

父组件

<script setup lang="ts">
import RefPractice from '@/components/ref_practice.vue'
import { type PersonIner } from '@/components/type'
import {ref， reactive} from 'vue'
let personList = reactive<PersonIner[]>([
  {id: 1, name: 'xxx', age: 18},
  {id: 2, name: 'xxx2', age: 19}
])
</script>

<template>
  <RefPractice :list="personList" @click="chackRef"></RefPractice>
</template>

子组件

<script setup lang="ts">
// withDefaults会飘红波浪线，This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.
// 可以正常运行的
// 有哪位好心人知道为啥吗
import { withDefaults，ref } from 'vue' 
import { type Persons } from '@/components/type'

// 第一种写法（箭头函数写 {花括号} 记得加 return）
withDefaults(defineProps<{list?:Persons}>(),{
  list: () => {
    return [{id: 3333, name: '毛利小五郎', age: 90}]
  }
})

// 第二种写法
// withDefaults(defineProps<{list?:Persons}>(),{
//   list: () => [{id: 3333, name: '毛利小五郎', age: 90}]
// })

</script>

<template>
  <div class="refPractice">
    <p v-for="item in list" :key="item.id">{{item.name}} - {{item.age}}</p>
  </div>
</template>
</style>