解决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 相关文章推荐
JavaScript创建对象的写法
Aug 29 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
json传值以及ajax接收详解
May 24 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
元素全屏的设置与监听实例
Nov 28 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
解决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
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
javascript的push使用指南
2014/12/05 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python编写Windows Service服务程序
2018/01/04 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python continue继续循环用法总结
2018/06/10 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python标准库itertools的使用方法
2020/01/17 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
幼儿师范毕业生自荐信
2013/11/09 职场文书
学生手册家长评语
2014/02/10 职场文书
如何写股份合作协议书
2014/09/11 职场文书
会议主持词开场白
2015/05/28 职场文书
2016新年感言
2015/08/03 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang