1. 程式人生 > 程式設計 >解決vue props傳Array/Object型別值,子元件報錯的情況

解決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為 ,如下

解決vue props傳Array/Object型別值,子元件報錯的情況

報錯

解決vue props傳Array/Object型別值,子元件報錯的情況

原因:props default 陣列/物件的預設值應當由一個工廠函式返回

解決:

解決vue props傳Array/Object型別值,子元件報錯的情況

補充知識:vue的props如何傳多個引數

vue父作用域將資料傳到子元件通過props進行傳參,如果需要傳多個引數可以陣列形式賦值給props,通過這樣子元件就可以獲取父元件傳體過來的多個引數了。

<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型別值,子元件報錯的情況就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。