Vue3 Props沒有默認(rèn)值但報錯的解決方案
Vue3解決 Props 沒有默認(rèn)值而報錯的問題
先看代碼,封裝一個面包屑組件,里面的內(nèi)容需要動態(tài)變化,于是用到了 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>
出現(xiàn)報錯:activeIndex 可能未賦值。
解決方案
使用 Vue3的 withDefaults 方法,給 activeIndex 一個默認(rèn)值:
<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 屬性被賦予了一個默認(rèn)值 0。這意味著如果沒有為組件提供 activeIndex 屬性,它將自動取值為 0。報錯也就解決了。
拓展:vue中props設(shè)置默認(rèn)值
一般情況下
props寫法
props:{
obj: {
type: Object,
default: () => {}
},
arr: {
type: Array,
default: () => []
}
}
但是,如果初始化的時候就使用里面的值,可能會出現(xiàn)沒有該值的情況,此時就會報錯。
應(yīng)該使用以下有默認(rèn)值的寫法
props:{
obj: {
type: Object,
default: function () {
return {
obje: ''
}
}
},
arr: {
type: Array,
default: function () {
return []
}
}
}
到此這篇關(guān)于Vue3 Props沒有默認(rèn)值但報錯的解決方案的文章就介紹到這了,更多相關(guān)Vue3 Props報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+ElementUI實現(xiàn)訂單頁動態(tài)添加產(chǎn)品數(shù)據(jù)效果實例代碼
本篇文章主要介紹了vue+ElementUI實現(xiàn)訂單頁動態(tài)添加產(chǎn)品效果實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
實例詳解Vue項目使用eslint + prettier規(guī)范代碼風(fēng)格
這篇文章主要介紹了Vue項目使用eslint + prettier規(guī)范代碼風(fēng)格,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-08-08
淺析vue cli3 封裝Svgicon組件正確姿勢(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue2更改data里的變量不生效時,深層更改data里的變量問題
這篇文章主要介紹了vue2更改data里的變量不生效時,深層更改data里的變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11

