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