Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >(四)定义 props 类型

(四)定义 props 类型

作者头像
老怪兽
发布于 2023-02-22 07:23:01
发布于 2023-02-22 07:23:01
57300
代码可运行
举报
运行总次数:0
代码可运行

# 一、定义 props 类型

  1. 第一种方式无法自动推断出类型
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup lang="ts">
defineProps(['id', 'title', 'price', 'isStock'])
</script>

2. 使用 JavaScript 的方式定义(不推荐)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup lang="ts">
defineProps({
    title: {
        type: String
    }
})
</script>

3. 使用 TypeScript 的方式定义

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup lang="ts">
// 使用 interface 定义
interface Product {
    id: number,
    title: string,
    price: number,
    isStock: boolean,
}

// 使用泛型定义
defineProps<Product>()
</script>

# 二、使用 withDefaults,给 props 定义默认值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup lang="ts">
// 使用 interface 定义
interface Product {
    id: number,
    title: string,
    price: number,
    isStock: boolean,
}

// withDefaults 定义默认值
withDefaults(defineProps<Product>(), {
    title: '默认标题',
    price: 100,
    isStock: true,
})

</script>

# 总结-写在最后

说明

vue 不支持使用外部导入进来的类型限制,比如通过 import 这种导入进来的不行,必须定义在内部

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年11月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3 中 使用 TypeScript
在单文件组件中使用 TypeScript,需要在 <script> 标签上加上 lang="ts" 的 attribute。当 lang="ts" 存在时,所有的模板内表达式都将享受到更严格的类型检查
程序员海军
2023/11/05
9450
验证 Vue Props 类型,你这几种方式你可能还没试用过!
vue 要求任何传递给组件的数据,都要声明为 props。此外,它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样,确保组件按预期使用。
前端小智@大迁世界
2022/09/27
1.6K0
vue3.0 sfc 中 setup 的变化
在vue中,sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式,它允许将 Vue 组件中的模板、逻辑 与 样式封装在单个文件中。
玖柒的小窝
2021/10/05
5980
Vue 3 + TypeScript 组件封装艺术:从原理到实践
在现代前端开发中,组件化开发已成为主流模式。Vue 3 配合 TypeScript 的组合,为我们提供了更强大的类型系统和更优秀的开发体验。本文将深入探讨如何基于 Vue 3 和 TypeScript 进行高质量的组件封装,并通过实际案例展示最佳实践。
编程小白狼
2025/04/26
3510
Vue3.0最新动态:script-setup 定稿,部分实验性 API 将弃用
最近一段时间挺忙,对 Vue 3.0 的更新记录看的比较少,今天看了一下 release 记录,发现最新的 2 个小版本对 script-setup 这个新特性改动还算蛮大的,之前的用法都调整了不少。
winty
2021/07/27
1.4K0
Vue前端篇——Vue 3 中的对象接口 props
在 Vue.js 的世界中,组件是构建用户界面的基石。而 props 则是组件之间传递数据的重要桥梁。Vue 3 引入了 Composition API,使得 props 的定义和使用更加灵活和强大。本文将深入探讨如何在 Vue 3 中使用 props,并通过一个具体的例子来展示其用法。
小明爱吃火锅
2024/07/29
1.2K0
Vue3 script-setup 使用指南
本文主要是讲解 <script setup> 与 TypeScript 的基本使用。
ConardLi
2022/02/18
6K0
Vue3.3 的新功能的一些体验
先来一个简单的,以前我们有时候想设个name,有时候不想让组件自动继承属性,这时候需要单独设置一个script进行设置,现在简化了操作,直接使用 defineOptions 即可。
用户1174620
2023/10/16
5790
使用 Vue 3 与 TypeScript 构建 Web 应用: Todo
引言 界面: Vue.js 3 JavaScript 超集: TypeScript 包管理器: pnpm 前端工程化/打包: Vite 路由: Vue Router 状态管理: Pinia CSS 预处理器: Less 代码格式化: Prettier 代码质量: ESLint 预览
yiyun
2023/07/17
1.3K0
使用 Vue 3 与 TypeScript 构建 Web 应用: Todo
前端系列第10集-实战篇
如果直接渲染1W行列表,不出意外你的页面就要卡了,比较常见的优化方案就是虚拟滚动,就是只渲染你能看到的视窗中的几十行,然后通过监听滚动来更新这几十个dom
达达前端
2023/10/08
3290
前端系列第10集-实战篇
被迫开始学习Typescript —— vue3的 props 与 interface
Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功能。
用户1174620
2022/05/20
5.1K0
被迫开始学习Typescript —— vue3的 props 与 interface
认识vue中的Props
Props 是 Vue 组件之间通信的一种方式,通过 Props,父组件可以向子组件传递数据,即:父组件可以通过组件标签上的属性值把数据传递到子组件中。子组件可以根据自己的属性和方法去渲染展示数据或执行某些操作。由于 props 是单向数据流的,它是只能从父组件传递到子组件的,而子组件是无法更改 props 的值的,只能由父组件来修改。这样就保证了组件的数据传递不会出现混乱和错乱的情况。
九仞山
2023/10/14
9450
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的问题,基本都贴出对应文档地址,还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发,因此主要分几个方面总结:
pingan8787
2022/04/14
6.6K0
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
【玩转全栈】----闹钟虐我千百遍?我虐 Vue3 如初恋!
块级作用域 是指变量的作用域限制在代码块内,通常由大括号 {} 包围,例如循环、条件语句或任何包含代码的语句块。
用户11404404
2025/02/08
1570
【玩转全栈】----闹钟虐我千百遍?我虐 Vue3 如初恋!
前端系列15集-watch,watchEffect,eventBus
watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
达达前端
2023/10/08
6810
关于 Vue3 + setup + ts 使用技巧的总结
ref 一般用于基本的数据类型,比如 string,boolean ,reactive 一般用于对象 ref 的地方其实也是调用的 reactive 实现的。
前端达人
2023/08/31
1.2K0
关于 Vue3 + setup + ts 使用技巧的总结
解锁 Vue3 全家桶 + TS 的正确姿势
https://juejin.cn/post/6980267119933931551
@超人
2021/07/29
6870
解锁 Vue3 全家桶 + TS 的正确姿势
前端系列16集-vue3范型,vue-i18n-next,watch,watchEffect
创建 src\lang\index.ts,使用 createI18n 创建 i18n 实例:
达达前端
2023/10/08
6040
Vue3学习笔记(四)——组件、生命周期
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展,但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后,就可以像搭建积木一下来搭建我们的项目。
张果
2022/11/14
1.5K0
Vue3学习笔记(四)——组件、生命周期
学习 Vue 3 全家桶 - 打造自己的通用组件库 - 环境搭建
参考 Element3 布局容器页面,共有 container、header、footer、aside、main 五个组件,这个组合可以很方便地实现常见的页面布局:
Cellinlab
2023/05/17
3320
相关推荐
Vue3 中 使用 TypeScript
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档