欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

解决vue props传Array/Object类型值,子组件报错的情况

时间:2021-03-22 09:10:04|栏目:vue|点击:

问题:

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-cli3.0如何构建功能完善的前端架子

栏    目:vue

下一篇:详解vue3.0 的 Composition API 的一种使用方法

本文标题:解决vue props传Array/Object类型值,子组件报错的情况

本文地址:http://www.codeinn.net/misctech/85828.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有