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


Posted in Javascript onNovember 07, 2020

问题:

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类型值,子组件报错的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
解决Vue watch里调用方法的坑
Nov 07 #Javascript
浅谈vue.watch的触发条件是什么
Nov 07 #Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 #Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 #Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 #Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php中JSON的使用方法
2015/04/30 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP CURL使用详解
2019/03/21 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
javascript生成随机颜色示例代码
2014/05/05 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Python通过poll实现异步IO的方法
2015/06/04 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
transform python环境快速配置方法
2018/09/27 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
求职推荐信范文
2013/12/01 职场文书
德语专业求职信
2014/03/12 职场文书
二年级评语大全
2014/04/23 职场文书
教师求职信怎么写
2015/03/20 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL