vue中设置props参数类型
Vue 设置 类型 参数 Props
2023-09-27 14:22:17 时间
props参数的使用
在使用vue的项目开发的过程中
经常会定义大量的组件使用
这个时候组件中的定义的数据类型就非常重要了
此时我们需要定义组件中需要的数据类型
之前我只知道简单的几个
今天忽然发现原来还可以这样使用简直太棒了
特别是自定义验证这一块可能不经常用
但是可以处理很多特殊的场景
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
<!-- 我之前一直以为多个验证是这样写 -->
propB:String | Number
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
default: function() {
return 'Default function'
}
}
相关文章
- [前端框架]-VUE(下篇)
- VUE设置浏览器icon图标
- Ant design vue 表格设置defaultExpandAllRows无效
- 精品微信小程序班级打卡系统+后台管理系统|前后分离VUE
- vue.js:值绑定
- Vue 3 不再支持 IE11
- jeecms v9 vue环境搭建
- Vue生命周期
- 全网最新的vue.js下载和安装的3种方法(2023年)
- vue组件通信
- vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title
- 如何用Vue实现选项卡效果以及Vue知识点
- vue 动态设置点击事件 动态设置属性 []
- vue-cli命令npm run serve 源码解析
- Vue高版本中一些新特性的使用
- Vue 编写一个长按指令
- 学习vue的一些资源
- vue——请求跨域时,vcli2/vcli3设置代理
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航