解決vue props傳Array/Object型別值,子元件報錯的情況
阿新 • • 發佈:2020-11-09
問題:
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型別值,子元件報錯的情況就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。