解决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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 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
关于svn冲突的解决方法
2013/06/21 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python计算一个文件里字数的方法
2015/06/15 Python
python运行时间的几种方法
2016/06/17 Python
Python变量和数据类型详解
2017/02/15 Python
Python yield与实现方法代码分析
2018/02/06 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
Python实现京东抢秒杀功能
2021/01/25 Python
文明青少年标兵事迹材料
2014/01/28 职场文书
九年级化学教学反思
2014/01/28 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
求职面试个人自我评价
2014/02/28 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
公司介绍信范文
2015/01/31 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
不要在HTML中滥用div
2021/05/08 HTML / CSS
Python如何配置环境变量详解
2021/05/18 Python