Vue3官方props介绍

基础props验证看传送门

PropType的理解

<script lang='ts'>
import {defineComponent, PropType} from 'vue'
export interface ColumnProps{id: string;title: string;avatar: string;description: string;
}
export default defineComponent({name:'ColumnList',props:{list:{type:Array as PropType<ColumnProps[]>,required:true}}
})
</script>

用一句简单的话来说，就是为了类型推论，让我们在使用属性的时候获取更丰富的类型提示，比如在这里我们定义了一个属性 list，使用 vue 默认的 Array，只能确定它是一个数组类型，不能确定数组里面的每一项到底是什么样子的。你在 setup 中，看 props.list 就是一个any数组，但是如果使用PropType <ColumnProps[]> 这个时候，props.list 就变成一个 ColumnProps 的数组，你使用它的时候不论在 ts 中还是模版中都能获得类型的推断和自动补全等等。
属性校验

vue3 PropType相关推荐

vue3，对比 vue2 有什么优点？
摘要:Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,Vue3在2020年正式推出,在源码和API都有较大变化,性能得到了显著 ...
详细分析 Vue3 文档
之前我就在想,为什么很多人遇到问题都是推荐说:看文档为什么? 因为文档真的很有用(真香) 这篇文章是个人对于文档中出现内容的理解,在断断续续的一周时间内看一次文档后,compisition API真 ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
vue3中使用tsx
前言相信 react 的伙伴对于 jsx/tsx 都不陌生吧,现在在 vue3 中也可以使用 jsx/tsx 语法拉. 安装插件(@vitejs/plugin-vue-jsx) vite官方提供了官 ...
用Vue3写个气泡对话框组件
Vue3 气泡对话框组件,使用 TypeScript 枚举限定类型,样式用到了 TailwindCSS 组件代码 <template><div class="mt-5 mb ...
Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）
1. 成果展示真实接口地址本项目使用的是真实线上的网易云API 线上演示地址目前只做了每日推荐(需登录)以及排行榜功能,点个star吧大佬们! 项目GitHub地址 main分支是Vue3+Ty ...
vue2、vue3 v-model
vue2 vue3 vue2 vue2-官网 <input v-model="val" /><input :value=&q ...
探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
vue3.0+TS使用
ts+ref //定义简单数据类型 //需要注意,指定了一个泛型参数但没有给出初始值,那么最后得到的就将是一个包含 undefined 的联合类型: // 推导得到的类型:Ref<boolean ...

vue3 PropType

PropType

Vue3官方props介绍

PropType的理解

vue3 PropType相关推荐

最新文章

热门文章