解锁vue3全家桶和ts正确姿势

Posted 2023-04-09

参考技术A

基础语法

定义data

定义props

props 需要使用 PropType 泛型来约束。

定义methods

vue-router

扩展路由额外属性

在实际项目开发中，常常会遇到这么一个场景，某一个路由是不需要渲染到侧边栏导航上的，此时我们可以给该路由添加一个hidden属性来实现。

在ts的强类型约束下，添加额外属性就会报错，那么我们就需要扩展 RouteRecordRaw 类型。

在setup中使用

需要导入 useRouter 创建一个 router 实例。

vuex

使用this.$store

在setup中使用

模块

新增一个 todo 模块。导入的模块，需要是一个 vuex 中的interface Module 的对象,接收两个泛型约束，第一个是 该模块类型 ，第二个是 根模块类型 。

使用：

elementPlus

完整引入

按需加载

需要安装 babel-plugin-component 插件:

axios

setup script

官方提供了一个 实验性 的写法，直接在 script 里面写 setup 的内容，即： setup script 。

之前我们写组件是这样的：

启用 setup script 后：在 script 上加上 setup

是不是看起来简洁了很多，组件直接导入就行了，不用注册组件，数据定义了就可以用。其实我们可以简单的理解为 script 包括的内容就是 setup 中的，并做了 return 。

导出方法

定义props

使用 props 需要用到 defineProps 来定义，具体用法跟之前的 props 写法类似：

基础用法

构造函数进行检查 给props定义类型：

使用类型注解进行检查

可以先定义好类型：

defineEmit

获取上下文

在标准组件写法里，setup 函数默认支持两个入参：

参数类型含义 propsobject由父组件传递下来的数据 contextobject组件的执行上下文

在setup script 中使用useContext获取上下文：

获取到的 slots , attrs 跟 setup 里面的是一样的。

征文｜@程序员，快来解锁过“中秋”的正确姿势！

 超多精彩奖品，快来投稿吧！【一键投稿】

又是一年中秋至——花好月圆夜，佳文当共鉴。本次征文活动诚邀各位CSDN博主参与，分享“程序员”视角下的中秋夜之美，内容可以是：

• 程序员过中秋的正确方式
• 互联网大厂的中秋仪式感
• 炫出我的中秋节礼盒
• 我的中秋节祝福程序源代码分享
• 如何用代码制作水墨风格的中秋佳节网页？
• 如何用代码绘制月饼？
• 用代码分析月饼节的那些事儿
• 打造我的专属中秋节小程序
• ······

主题不限、仅供参考，快来投稿吧！

一、征文时间

流程	时间
提交投稿	8月22日—9月12日
文章评审	9月13日—9月15日
榜单公布	9月16日
奖品寄送	9月30日前

二、征文奖品

奖项	奖品	获取规则	数量
月中折桂奖	定制周边礼盒（充电宝+鼠标+数据线+电脑支架+U盘）	综合参考投稿数量、阅读量、点赞量/评论量/收藏量等数据。	3
皓月千里奖	定制双肩包+定制T恤+定制扑克牌		6
花好月圆奖	定制T恤+定制帆布袋+定制扑克牌		10
桂子飘香奖	定制帆布袋+定制扑克牌		20

【特别福利奖】：

奖项	奖品	获取规则	数量
好文尝鲜奖	定制中秋礼盒	9月1日22:00前投稿的博主，将选取TOP10获奖者，提前获取CSDN定制中秋节日礼盒。	10
转发分享奖	神秘小礼品	9月10-12日三天，成功上榜《每日分享能手》、且带来的站外访客数位于TOP30者。	30

获奖说明：

1、【特别福利奖（好文尝鲜奖+转发分享奖）】与其他奖项可以同时获取；

2、【好文尝鲜奖】奖品最迟会在9月7日前寄出，其余奖品仍在9月30日前寄出；

3、单人投稿数量无限制，但均需紧紧围绕征文主题“中秋节”。

三、征文说明

1、投稿方式

本次征文活动面向所有CSDN博主，参与方式如下：

1、点击直达【官方活动页】，立即投稿；

2、所有参赛文章需在2022年9月12日23:59之前提交。

2、征文规则

1、题目自拟，需紧紧围绕征文主题“中秋节”，并以程序员的视角呈现，在CSDN官网首发；

2、要求文章字数不少于600字（不包含代码串），文章逻辑清晰，排版整洁；

3、非主题投稿、非原创、营销软文、广告、抄袭等文章均无参赛资格。

3、评审规则

本次征文由内部评审团进行评审，对参赛文章进行综合评价，包括投稿数量、阅读量、点赞量/评论量/收藏量等基础数据，同时需具备实践性、总结性、创新性、可借鉴性等要素。

四、活动二维码

扫码进入官方活动群：

有问题请咨询运营小姐姐：

超多精彩奖品，快来投稿吧！【一键投稿】