Vue3 Props没有默认值但报错的解决方案
作者：正宗咸豆花
这篇文章主要介绍了Vue3 Props没有默认值但报错的解决方案,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
Vue3解决 Props 没有默认值而报错的问题
先看代码，封装一个面包屑组件，里面的内容需要动态变化，于是用到了 props：
"<template>
<div>
<el-breadcrumb separator="/" class="ml-12 mt-2">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/methods/zuzhi" rel="external nofollow" >解决方案</a></el-breadcrumb-item>
<el-breadcrumb-item>{{ lessons.cargoLessons[props.activeIndex].name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
activeIndex: Number,
});
const lessons = ...
</script>
出现报错：activeIndex 可能未赋值。
解决方案
使用 Vue3的 withDefaults 方法，给 activeIndex 一个默认值：
<script setup lang="ts">
import { withDefaults, defineProps } from 'vue'
const props = withDefaults(defineProps<{
activeIndex: number
}>(), {
activeIndex: 0 // Assigning a default value of 0
});
const lessons = {
cargoLessons: [
...
]
}
</script>
在这个例子中，activeIndex 属性被赋予了一个默认值 0。这意味着如果没有为组件提供 activeIndex 属性，它将自动取值为 0。报错也就解决了。
拓展：vue中props设置默认值
一般情况下
props写法
props：{
obj: {
type: Object,
default: () => {}
},
arr: {
type: Array,
default: () => []
}
}
但是，如果初始化的时候就使用里面的值，可能会出现没有该值的情况，此时就会报错。
应该使用以下有默认值的写法
props：{
obj: {
type: Object,
default: function () {
return {
obje: ''
}
}
},
arr: {
type: Array,
default: function () {
return []
}
}
}
到此这篇关于Vue3 Props没有默认值但报错的解决方案的文章就介绍到这了,更多相关Vue3 Props报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！