vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決

發(fā)布時間：2020-11-09 15:19:42 來源：億速云閱讀：763 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

問題：

Props with type Object/Array must use a factory function to return the default value.

1、在vue中如果當(dāng)在父組件通過props傳Array/Object類型值給子組件的時候

2、如果子組件的props接收default為，如下

vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決

報錯

vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決

原因：props default 數(shù)組／對象的默認(rèn)值應(yīng)當(dāng)由一個工廠函數(shù)返回

解決：

vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決

補充知識：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: '學(xué)習(xí) JavaScript' }, { text: '學(xué)習(xí) Vue' }, { text: '整個牛項目' } ]
 }
 })
</script>

上述就是小編為大家分享的vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

vue項目中利props傳遞Array/Object類型值時出現(xiàn)子組件報錯如何解決

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽