vue3 的 props

Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功能。

props 可以不依赖TS,自己有一套运行时的验证方式,如果加上TS的话,还可以实现在编写代码的时候提供约束、判断和提示等功能。

Prop 的校验

官网:https://staging-cn.vuejs.org/guide/components/props.html#prop-validation

Vue 提供了一种对 props 的属性进行验证的方法,有点像 Schema。不知道Vue内部有没有提供interface,目前没有找到,所以我们先自己定义一个:

/**
* vue 的 props 的验证的类型约束
*/
export interface IPropsValidation {
/**
* 属性的类型,比较灵活,可以是 String、Number 等,也可以是数组、class等
*/
type: Array<any> | any,
/**
* 是否必须传递属性
*/
required?: boolean,
/**
* 自定义类型校验函数(箭头函数),value:属性值
*/
validator?: (value: any) => boolean,
/**
* 默认值,可以是值,也可以是函数(箭头函数)
*/
default?: any
}

后面会用到。

composition API

官网:https://staging-cn.vuejs.org/guide/typescript/composition-api.html

准确的说是在 script setup 的情况下,如何设置 props,具体方法看官网,这里不搬运。

探讨一下优缺点。

interface Props {
foo: string
bar?: number
} // 对 defineProps() 的响应性解构
// 默认值会被编译为等价的运行时选项
const { foo, bar = 100 } = defineProps<Props>() // 引入 接口定义
import { Props } from './other-file' // 不支持!
defineProps<Props>()

虽然可以单独定义 interface ,而且可以给整体 props 设置类型约束,但是只能在组件内部定义,目前暂时不支持从单独的文件里面读取。而且不能“扩充”属性。

也就是说,基本无法实现复用。

这个缺点恰恰和我的目的冲突,等待新版本可以解决吧。

option API

官网:https://staging-cn.vuejs.org/guide/typescript/options-api.html

这种方式支持Option API,也支持 setup 的方式,可以从外部引入 接口定义,但是似乎不能给props定义整体的接口。

import { defineComponent } from 'vue'
import type { PropType } from 'vue' interface Book {
title: string
year?: number
} export default defineComponent({
props: {
bookA: {
type: Object as PropType<Book>,
// 确保使用箭头函数
default: () => ({
title: 'Arrow Function Expression'
}),
validator: (book: Book) => !!book.title
}
},
setup(props) {
props.message // <-- 类型:string
}
})

想了半天,可以用“二段定义”方式的方式来解决:

  • 定义一个 interface,规定一个组件必须有哪些属性。
  • 定义 props 的 “描述对象”,作为共用的 props。

我的想法

为啥要给 props 设置一个 整体的 interface,而且还要从外部文件引入呢?

因为我理解的 interface 可以拥有“约束”的功能,即:可以通过 interface 约束多个(相关)组件的 props 里面必须有一些相同的属性。

所以需要在一个单独的文件里面定义接口,然后在组件里面引入,设置给组件的props。

Vue不倡导组件使用继承,那么如果想要约束多个组件,拥有相同的 props?似乎应该可以用 interface ,但是看官方文档,好像思考角度不是这样的。

应对方式

  • 先定义组件需要哪些属性的 interface:
/**
* 表单子控件的共用属性。约束必须有的属性
*/
export interface ItemProps {
/**
* 字段ID、控件ID,sting | number
*/
columnId: IPropsValidation,
/**
* 表单的 model,含义多个属性,any
*/
model: IPropsValidation,
/**
* 字段名称,string
*/
colName: IPropsValidation,
/**
* 控件类型,number
*/
controlType: IPropsValidation,
/**
* 控件备选项,一级或者多级,Array<IOptionItem | IOptionItemTree>
*/
optionList: IPropsValidation,
/**
* 访问后端API的配置,IWebAPI
*/
webapi: IPropsValidation,
/**
* 防抖延迟时间,0:不延迟,number
*/
delay: IPropsValidation,
/**
* 防抖相关的事件() => void
*/
events: IPropsValidation,
/**
* 控件的大小,string
*/
size: IPropsValidation,
/**
* 是否显示清空的按钮,boolean
*/
clearable: IPropsValidation,
/**
* 控件的扩展属性,any
*/
extend: IPropsValidation,
}

ItemProps:目的是约束一个组件需要设置哪些属性,限制属性名称。

  • 然后定义 共用 的 props 的描述对象:
import type { PropType } from 'vue'

import type {
ItemProps,
IOptionItem,
IOptionItemTree,
IWebAPI
} from '../types/type' /**
* 基础控件的共用属性,即表单子控件的基础属性
*/
const itemProps: ItemProps = {
/**
* 字段ID、控件ID
*/
columnId: {
type: [Number, String],
default: () => Math.floor((Math.random() * 1000000) + 1) // new Date().valueOf()
},
/**
* // 表单的 model,可以整体传入,便于子控件维护字段值。
*/
model: {
type: Object
},
/**
* 字段名称,控件使用 model 的哪个属性,多个字段名称用 “_” 分割
*/
colName: {
type: String,
default: ''
},
/**
* 控件类型,表单控件据此加载对应的子控件
*/
controlType: {
type: Number,
default: 101
},
/**
* 控件的备选项,单选、多选、等控件需要
*/
optionList: {
type: Object as PropType<Array<IOptionItem | IOptionItemTree>>,
default: () => {return []}
},
/**
* 访问后端API的参数,IWebAPI
*/
webAPI: {
type: Object as PropType<IWebAPI>,
default: () => {
return {
serviceId: '',
actionId: '',
dataId: '',
body: null,
cascader: {
lazy: false, // 是否需要动态加载
actions: ['',''] // 按照level的顺序设置后端 API 的 action
}
}
}
},
/**
* 防抖的时间间隔,0:不用防抖。
*/
delay: {
type: Number,
default: 0
},
/**
* 事件集合,主要用于防抖
*/
events: {
type: Object,
default: () => {
return {
input: () => {}, // input 事件
enter: () => {}, // 按了回车
keydown: () => {} // 正在输入
}
}
},
/**
* 子控件的规格,默认设置。
* * 【element-plus】large / default / small 三选一
*/
size: { //
type: String,
default: 'small',
validator: (value) => {
// 这个值必须匹配下列字符串中的一个
return ['large', 'default ', 'small'].indexOf(value) !== -1
}
},
/**
* 是否显示可清空的按钮,默认显示
*/
clearable: {
type: Boolean,
default: true
},
/**
* 扩展属性,对象形式,存放组件的扩展属性
*/
extend: {
type: Object,
default: () => {return {}}
}
} export { itemProps }

定义 props 的属性的具体类型、默认值等。

  • 最后在组件里面引入

import { itemProps } from '../../../lib/base/props-item' export default defineComponent({
name: 'ui-core-form-item',
props: {
aa: String,
...itemProps
},
setup(props) {
console.log('表单子控件的 props:', props) return {
props
}
}
})

使用解构的方式设置组件的 props,还可以有提示,还可以扩展自己的属性。

好像哪里不对,不过先这样了。

vue3 的 props 到底是啥结构?

说起来比较复杂:

  • 外层是 shallowReadonly。(第一层属性不能直接改,但是第二层(通过引用类型)可以直接改。)
  • 里面是 shallowReactive。(解构时不会强制把普通对象变成reactive,为了效率吧。)

基本就是这样。

被迫开始学习Typescript —— vue3的 props 与 interface的更多相关文章

  1. 被迫开始学习Typescript —— interface

    一开始以为,需要使用 class 来定义呢,学习之后才发现,一般都是使用 interface 来定义的. 这个嘛,倒是挺适合 js 环境的. 参考:https://typescript.bootcss ...

  2. 被迫开始学习Typescript —— class

    TS 的 class 看起来和 ES6 的 Class 有点像,基本上差别不大,除了 可以继承(实现)接口.私有成员.只读等之外. 参考:https://typescript.bootcss.com/ ...

  3. 在WisOne平台上学习TypeScript

    TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类.接口.继承等相关在javaScript中不容易实现的功能, ...

  4. 学习TypeScript,笔记一:TypeScript的简介与数据类型

    该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27  16:50:03 一.什么是TypeScript? TypeScript是javasc ...

  5. 学习typescript(二)

    学习typescript(二) ts 与 js 交互 ts 调用 js module使用 分为两种情况: ts 调用自己写的 js ts 调用别人写的 js 也就通过 npm 安装的 第一种情况处理如 ...

  6. vue3.0 props

    .orange { color: rgba(255, 165, 0, 1) } Vue3.0 props 1.你是否遇到了,引用props数据报错的问题? 在Vue3.0中,采用了proxy,让很多数 ...

  7. Typescript | Vue3源码系列

    TypeScript 是开源的,TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript.编译出来的 JavaScript 可以运行在任何浏览器上.TypeS ...

  8. react学习笔记_03-组件&props

    组件 & Props的学习 组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思. 组件,从概念上类似于 JavaScript 函数.它接受任意的入参(即 “props”) ...

  9. 【js】 vue 2.5.1 源码学习(五) props directives规范化 props 合并策略

    大体思路 (四) 上节回顾: A: 对于生命周期函数将父子组件的函数放到一个数组里面,特定时间点调用,保证父子组件函数都调用到. B: 对于directive,filters,components 等 ...

随机推荐

  1. Netty学习摘记 —— 预置SSL / HTTP / WebSocket编解码器

    本文参考 本篇文章是对<Netty In Action>一书第十一章"预置的ChannelHandler和编解码器"的学习摘记,主要内容为通过 SSL/TLS 保护 N ...

  2. Python 与 C++ 向量

    Python 与 C++ 向量 Python 和 C++ 对比 我们再回到向量!你已经学习了如何声明一个空的向量. 在下面的代码中,你可以比较 Python 列表和 C++ 向量的语法.你会看到,C+ ...

  3. vue入门文章

    本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...

  4. circle_clock 简单canvas实现圆弧时钟

    渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_process_bar就像到了用来做时钟大概会比较有趣吧,所以就 ...

  5. vue全家桶+axios+jsonp+es6 仿肤君试用小程序

    vue全家桶+axios+jsonp+es6 仿肤君试用小程序 把自己写的一个小程序项目用vue来实现的,代码里面有一些注释,主要使用了vue-cli,vue,vuex,vue-router,axoi ...

  6. java中如何知道一个字符串中有多少个字,把每个字打印出来,举例

    9.6 About string,"I am ateacher",这个字符串中有多少个字,且分别把每个字打印出来. public class Test {     static i ...

  7. idea启动tomcat后控制台日志显示中文乱码问题

     想必有些人 会遇到 控制台中文乱码: 可以通过以下方法解决该中文乱码问题: 1. 点击Help => Edit custom VM Options,在最后面添加 "-Dfile.en ...

  8. Installing github.com/mdempsky/gocode FAILED ----vscode安装go插件中的一些坑

    问题前景: 最近在使用vscode,编写一些go的代码,但发现调试的时候,会需要安装很多插件,但通过vscode之间安装的话,会出现如下的错误: Installing github.com/mdemp ...

  9. LC-54

    给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2 ...

  10. 2021-ACM-ICPC-济南站 K Search For Mafuyu 【树的遍历与回溯,dfs, 邻接表】

    PAT 题目详情 (pintia.cn) 题目 题意描述 n个房间, 有n-1个通道, kanade初始在1,Mafuyu 位置未知,求K到M的最小期望,也就是到每个地方的平均值,注意的是这里的求法, ...