解决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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
js实现有趣的倒计时效果
Jan 19 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
使用 php4 加速 web 传输
2006/10/09 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php实现mysql封装类示例
2014/05/07 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php备份数据库类分享
2015/04/14 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
jQuery插件Validation表单验证详解
2018/05/26 jQuery
微信小程序实现点击效果
2019/06/21 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python回调函数的使用方法
2014/01/23 Python
python获取本地计算机名字的方法
2015/04/29 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python else语句在循环中的运用详解
2020/07/06 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
工商管理自荐书
2014/07/06 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
爱护公物主题班会
2015/08/17 职场文书
导游词之丽江普济寺
2019/10/22 职场文书