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

2020-11-07 21:01:17

問題：

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 陣列／物件的預設值應當由一個工廠函數返回

解決：

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

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

熱門文章