Vue3 Props沒有默認值但報錯的解決方案
更新時間：2024年04月09日 09:28:39 作者：正宗咸豆花
這篇文章主要介紹了Vue3 Props沒有默認值但報錯的解決方案,文中通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
Vue3解決 Props 沒有默認值而報錯的問題
先看代碼，封裝一個面包屑組件，里面的內(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 一個默認值：
<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設(shè)置默認值
一般情況下
props寫法
props：{
obj: {
type: Object,
default: () => {}
},
arr: {
type: Array,
default: () => []
}
}
但是，如果初始化的時候就使用里面的值，可能會出現(xiàn)沒有該值的情況，此時就會報錯。
應該使用以下有默認值的寫法
props：{
obj: {
type: Object,
default: function () {
return {
obje: ''
}
}
},
arr: {
type: Array,
default: function () {
return []
}
}
}
到此這篇關(guān)于Vue3 Props沒有默認值但報錯的解決方案的文章就介紹到這了,更多相關(guān)Vue3 Props報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目中,main.js,App.vue,index.html的調(diào)用方法
今天小編就為大家分享一篇vue項目中,main.js,App.vue,index.html的調(diào)用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了徹底揭秘keep-alive原理(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
在 Vue 項目中,隨著業(yè)務迭代,代碼體積會像冬天的羽絨服一樣越來越膨脹,如果不加以控制,單個體積過大的JS文件會導致頁面加載緩慢、用戶體驗下降,甚至影響轉(zhuǎn)化率,今天就帶大家走進前端分包的奇妙世界,用實戰(zhàn)經(jīng)驗告訴你如何優(yōu)雅地拆分代碼包,需要的朋友可以參考下2025-08-08
這篇文章主要介紹了vue 動態(tài)表單開發(fā)方法,結(jié)合具體案例形式詳細分析了vue.js動態(tài)表單相關(guān)原理、開發(fā)步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native
今天小編就為大家分享一篇vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue動態(tài)類的幾種使用方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Vue3帶來了許多性能優(yōu)化和效率提升的特性，本文將重點討論Vue3在靜態(tài)提升、預字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進，我們將通過對比Vue2和Vue3的編譯結(jié)果來說明這些方面的效率提升2023-12-12
這篇文章主要介紹了vue 避免變量賦值后雙向綁定的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11