vue props default Array或是Object的正确写法说明
1、错误写法
demo:{ type:Array, default:[] }
eslint语法报错:
Invalid default value for prop “demo”: Props with type Object/Array must use a factory function to return the default value.
2、正确的写法应该是:
demo: { type: Array, default: function () { return [] } }
或是用箭头函数:
demo: { type: Array, default: () => [] }
3、对象的箭头函数写法:
demoObj: { type: Object, default: () => ({}) }
或是常规
demoObj: { type: Object, default: function () { return {} } }
错误的写法
demoObj: () => {}
补充知识:vue 传参props里面为什么要带type,还有default?
这个是子组件啦 ,写type的意思是swiperDate传过来的数据类型是数组,default就是表示不传默认返回的[ ],空数组.
这种就是表示传的数据类型是number,不传默认是0。
以上这篇vue props default Array或是Object的正确写法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue props中Object和Array设置默认值操作
我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父组件没有传这个值或者值是空时,输出的话,返回: 下面这种是错误的 seller: { type: Object, default: () => {} } 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template
-
解决vue组件props传值对象获取不到的问题
先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default
-
详解Vue内部怎样处理props选项的多种写法
开发过程中,props 的使用有两种写法: // 字符串数组写法 const subComponent = { props: ['name'] } // 对象写法 const subComponent = { props: { name: { type: String, default: 'Kobe Bryant' } } } Vue在内部会对 props 选项进行处理,无论开发时使用了哪种语法,Vue都会将其规范化为对象的形式.具体规范方式见Vue源码src/core/util/options
-
Vue props用法详解(小结)
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat
-
vue props default Array或是Object的正确写法说明
1.错误写法 demo:{ type:Array, default:[] } eslint语法报错: Invalid default value for prop "demo": Props with type Object/Array must use a factory function to return the default value. 2.正确的写法应该是: demo: { type: Array, default: function () { return [] } }
-
解决vue props传Array/Object类型值,子组件报错的情况
问题: 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父作用域将数据传到子组件通过pro
-
vue props 一次传多个值实例
数组: <custom-element :whatever="[...array]"></custom-element> 对象: <custom-element :whatever="{...obj}"></custom-element> 或者: <custom-element v-bind="obj" </custom-element> 子组件: <ul class=&qu
-
vue - props 声明数组和对象操作
我就废话不多说了,大家还是直接看代码吧~ props: { array: { type: Array, default () { return [] } }, object: { type: Object, default () { return {} } } } 补充知识:Vue项目中,要保证某个部分的高度,应该怎么设置 看代码吧~ .icons overflow: hidden height: 0 padding-bottom: 50% background: green 以上这篇vue -
-
vue props type设置多个类型
目录 props type设置多个类型 vue定义props props type设置多个类型 props: { value: { // vue props type设置多个类型 type: Number | null, required: true }, articleId: { type: [Number, String, Object], required: true } }, vue定义props props: { num: { type: [Number, String], //支持多
-
vue props对象validator自定义函数实例
validator自定义函数实例 props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组且
-
Javascript中判断变量是数组还是对象(array还是object)
怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回'objec'. 此问题的一个可行的答案是是检查该变量是不是object,并且检查该变量是否有数字长度(当为空array时长度也可能为0). 然而,参数对象[arguments object](传给制定函数的所有参数),也可能会适用于上述方法,技术上来说,参数对象并不是一个array. 此外,当一个对象有a.length属性的时候,这个方
-
Vue中强制组件重新渲染的正确方法
有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda
随机推荐
- js在数组中删除重复的元素自保留一个(两种实现思路)
- Codeigniter实现智能裁剪图片的方法
- php链表用法实例分析
- Android设计模式系列之组合模式
- Javascript基础 函数“重载” 详细介绍
- JS中parseInt()和map()用法分析
- Python实现登录人人网并抓取新鲜事的方法
- asp 随机字符串函数
- RHEL 6平台MySQL数据库服务器的安装方法
- 浅谈jquery的html方法里包含特殊字符的处理
- VBS教程:正则表达式简介 -特殊字符
- md9.exe scvhost.exe 只木马下载者查杀方法
- mysql批量执行sql文件的方法
- win2003服务器通过ipsec做防火墙的配置方法
- BBS3000漏洞
- Java Date与String的相互转换详解
- C++内存查找实例
- 利用OpenCV实现局部动态阈值分割
- ubuntu 16.04LTS 开机启动自动更换壁纸的实现方法
- PHP使用ActiveMQ实现消息队列的方法详解