解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
更新時(shí)間：2020年11月07日 14:52:00 作者：linefate
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
問題：
Props with type Object/Array must use a factory function to return the default value.
1、在vue中如果當(dāng)在父組件通過props傳Array/Object類型值給子組件的時(shí)候
2、如果子組件的props接收default為 ，如下
報(bào)錯(cuò)
原因：props default 數(shù)組／對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
解決：
補(bǔ)充知識(shí)：vue的props如何傳多個(gè)參數(shù)
vue父作用域?qū)?shù)據(jù)傳到子組件通過props進(jìn)行傳參，如果需要傳多個(gè)參數(shù)可以數(shù)組形式賦值給props，通過這樣子組件就可以獲取父組件傳體過來的多個(gè)參數(shù)了。
<div id="app">
<ul >
<todo-item v-for="(item,index) in arr" v-bind:todo="item" v-bind:index="index"></todo-item>
</ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
Vue.component("todo-item",{
props:['todo','index'],
template:"<li>{{index}}:{{todo.text}}</li>"
})
var app = new Vue({
el:"#app",
data:{
arr: [ { text: '學(xué)習(xí) JavaScript' }, { text: '學(xué)習(xí) Vue' }, { text: '整個(gè)牛項(xiàng)目' } ]
}
})
</script>
以上這篇解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能，本文通過實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要幫助大家簡(jiǎn)單理解Vue條件渲染，什么是Vue條件渲染,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue拖動(dòng)截圖功能的簡(jiǎn)單實(shí)現(xiàn)方法
最近項(xiàng)目上要做一個(gè)車牌識(shí)別的功能,就需要做拖動(dòng)截圖功能了,因?yàn)榍岸问莢ue,所以下面這篇文章主要給大家介紹了關(guān)于Vue拖動(dòng)截圖功能的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2021-07-07
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問題的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了詳解Vue如何支持JSX語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vite多頁面配置項(xiàng)目實(shí)戰(zhàn)
vite官方文檔中有關(guān)于多頁面應(yīng)用模式如果配置的說明,下面這篇文章主要給大家介紹了關(guān)于vite多頁面配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開發(fā)需求，感興趣的朋友可以了解下2020-10-10
Vue.extend 編程式插入組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 編程式插入組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue3使用useDialog實(shí)現(xiàn)對(duì)話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個(gè)功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對(duì)話框的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01