Vue子组件内的props对象参数配置方法
更新时间：2022年08月26日 09:03:58 作者：雨季mo浅忆
这篇文章主要介绍了 Vue 子组件内的 props 对象里的 default 参数是如何定义Array、 Object 、或 Function 默认值的正确写法说明，感兴趣的朋友跟随小编一起看看吧
这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义
Array、Object、或Function默认值的正确写法说明，具有很好的参考价值
一、简单数据类型
1、布尔类型 Boolean
正确写法 ：
props: {
demoBoo: {
type: Boolean,
default: true,
},
},2、数字类型 Number
正确写法 ：
props: {
demoNum: {
type: Number,
default: 1,
},
},3、字符串类型 String
正确写法 ：
props: {
demoStr: {
type: String,
default: 'hello',
},
},二、复杂数据类型
1、数组 Array
错误写法 ：
props: {
demoArr: {
typeof: Array,
default: [],
},
},Eslint 语法报错 ：
Invalid default value for prop “demo”: Props with type Object/Array must use a factory function to return the default value.
正确的常规写法 ：
props: {
demoArr: {
type: Array,
default: function () {
return [];
},
},
},或是用 箭头函数 ：
props: {
demoArr: {
type: Array,
default: () => [],
},
},2、对象 Object
错误写法 ：
props: {
demoObj: {
type: Object,
default: () => {},
},
},正确的常规写法 ：
props: {
demoObj: {
type: Object,
default: function () {
return {};
},
},
},或是用 箭头函数 ：（ 注意 ： 这里的对象一定要用小括号包裹起来( { } )）
props: {
demoObj: {
type: Object,
default: () => ({}),
},
},3、函数 Function
正确写法 ：
props: {
demoFun: {
type: Function,
default: () => {},
},
},补充知识 ：Vue 传参 props 里面为什么要带 type , 还有 default ?
这个是子组件, 写 type 的 意思 是 swiperDate 传过来的数据类型是 数组 ,
default就是 表示 不传 ,默认返回 的 [ ] , 空数组 .
这种就是 表示 传的数据类型是Number, 不传默认是 数字 0 。
到此这篇关于Vue子组件内的props对象参数配置的文章就介绍到这了,更多相关Vue子组件对象参数配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决
这篇文章主要介绍了Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了vue3 使用socket的完整代码,包括vue3客户端和服务端的实例讲解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了在Vue.js中加载字体的正确方法,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
本文主要介绍了vue+springboot上传大文件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue 判断元素内容是否超过宽度的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue中Quill富文本编辑器的使用教程，包括自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小等使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
Vue.js中使用最多的两个指令就是v-if和v-for,下面这篇文章主要给大家介绍了关于Vue3中v-if和v-for优先级的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了打通前后端构建一个Vue+Express的开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家介绍了Vue router 路由守卫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最新评论