解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況

更新時(shí)間：2020年11月07日 14:52:00 作者：linefate

這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題：

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ù)組／對象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回

解決：

補(bǔ)充知識：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ò)的情況就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vscode 配置vue+vetur+eslint+prettier自動格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動格式化功能，本文通過實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
簡單理解Vue條件渲染
這篇文章主要幫助大家簡單理解Vue條件渲染，什么是Vue條件渲染,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue拖動截圖功能的簡單實(shí)現(xiàn)方法
最近項(xiàng)目上要做一個(gè)車牌識別的功能,就需要做拖動截圖功能了,因?yàn)榍岸问莢ue,所以下面這篇文章主要給大家介紹了關(guān)于Vue拖動截圖功能的簡單實(shí)現(xiàn)方法,需要的朋友可以參考下
2021-07-07
vue如何解決axios請求前端跨域問題
vue項(xiàng)目中,前端使用axios與后臺進(jìn)行數(shù)據(jù)請求或者提交的時(shí)候,如果后臺沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請求的時(shí)候就會報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請求前端跨域問題的相關(guān)資料,需要的朋友可以參考下
2021-10-10
詳解Vue如何支持JSX語法
這篇文章主要介紹了詳解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 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開發(fā)需求，感興趣的朋友可以了解下
2020-10-10
Vue.extend 編程式插入組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 編程式插入組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個(gè)功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01