您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

Vue3中defineEmits、defineProps 是怎么做到不用引入就能直接用的

时间:2022-08-16 11:14:46  来源:  作者:前端小智

最近正在将一个使用单文件组件的 Options API 的 Vue2 JAVAScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势。

比如,下面这种 选项API 方式:

export default {  props: {    name: {      type: String,      required: true.    }  },  emits: ['someEvent', 'increaseBy']};

我们将它转成 组合API 方式:

 const props = defineProps<{  name: string; }>(); const emit = defineEmits<{  (event: 'someEvent): void;  (event: 'increaseBy', value: number): void; }>();

从 选项API 的 emit 和 props 到 组合API 的 defineemit 和 defineProps 函数的基于类型语法的转换并不简单。我也很好奇 Vue 是如何处理接口的。

TypeScript 接口是只在设计和编译时存在的结构。它们在JavaScript运行时之前被过滤掉,那么它们是如何影响组件的行为的呢?

我想知道是否有办法看到Vue如何解释传递给 defineEmits 和 defineProps 的通用参数。如果你注意到文档中说你不需要导入 defineEmits 和 defineProps 函数。这是因为它们实际上是同名的JavaScript函数的宏。在进行完整的 TypeScript 传递之前,Vue webpack插件使用TypeScript的 AST(抽象语法树)来推导JavaScript版本的函数选项。

如果不是因为宏:

 defineProps<{    prop1: string;    prop2: number;  }>();

就会变成:

 defineProps();

这样就会导致参数缺失的错误。

如果看一下Vue的 SFC(单文件组件)编译器源代码,有一个叫做 compileScript 的函数。我开始尝试用最少的参数来调用这个函数,这样就不会出错,并模拟任何不重要的必要参数。最终发现了另一个叫 parse 的函数。这给了我所需的大部分参数,只剩下要mock的组件 id。

这里有一个小脚本,它接收SFC的 .vue文件并输出 Vue 如何解释 TypeScript。

import { readFile, writeFile } from "fs";import parseArgs from "minimist";import { parse, compileScript } from "@vue/compiler-sfc";const { file, out } = parseArgs(process.argv.slice(2), {  string: ["file", "out"],  alias: {    file: "f",    out: "o"  }});const filename = file;const mockId = "xxxxxxxx";readFile(filename, "utf8", (err, data) => {  const { descriptor } = parse(data, {    filename  });  const { content } = compileScript(descriptor, {    inl.NETemplate: true,    templateOptions: {      filename    },    id: mockId  });  if (out) {    writeFile(out, "utf8", content);  } else {    process.stdout.write(content);  }});

事例地址:
https://stackblitz.com/edit/node-fzuykn?file=index.js

例如,有如以下组件:

interface Bar {  prop1: string;  prop2: number;}defineProps<{  bar: Bar;  bars: Bar[];  asdf1?: boolean;  asdf2: string[];}>();

输出:

interface Bar {  prop1: string;  prop2: number;}export default /*#__PURE__*/_defineComponent({  __name: 'demo',  props: {    bar: { type: Object, required: true },    bars: { type: Array, required: true },    asdf1: { type: Boolean, required: false },    asdf2: { type: Array, required: true }  },  setup(__props: any) {    return (_ctx: any,_cache: any) => {      return (_openBlock(), _createElementBlock("div"))    }}

正如上面所看到的,SFC编译器采用TypeScript类型信息,并建立了 props 对象。原始类型是一对一的。接口变成对象,而 ? 可选语法驱动 required 的属性。

作者:romaopedro 译者:前端小智 来源:logrocket
https://unicorn-utterances.com/posts/vue-composition-inspector



Tags:Vue3   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
TroisJS 是一个基于 Three.js 的 vue3 三维可视化库,TroisJS对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器,并在你的 vue文件 的部分中使用...【详细内容】
2022-10-08  Tags: Vue3  点击:(45)  评论:(0)  加入收藏
如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。对于 vue@3.2.34 及以上版本,在使用 <script setup> 的单文件组件时,vue 会...【详细内容】
2022-10-08  Tags: Vue3  点击:(34)  评论:(0)  加入收藏
Vite是下一代前端开发与构建工具。用Vite搭建一个新项目的操作步骤如下。第1步. 新建一个文件夹,并在开发工具中以项目形式打开该文件夹。第2步. 新建一个终端,使用npm安装Vit...【详细内容】
2022-10-07  Tags: Vue3  点击:(20)  评论:(0)  加入收藏
前言这几天整理了小程序里心愿圈里朋友们发的几个源码需求:人员管理系统、人事管理系统(模块齐全)、工资管理系统。网上是找到类似的系统源码并且测试了,但很遗憾,这类系统要么都...【详细内容】
2022-09-21  Tags: Vue3  点击:(48)  评论:(0)  加入收藏
来自公众号: 前端自习课链接:https://juejin.cn/post/7084536432731095048/最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的...【详细内容】
2022-08-16  Tags: Vue3  点击:(88)  评论:(0)  加入收藏
最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势。比如,下面这种 选项API 方式:export default {...【详细内容】
2022-08-16  Tags: Vue3  点击:(214)  评论:(0)  加入收藏
前言官网地址: https://staging-cn.vuejs.org/vue最新版分为两个版本: Vue3.0(20年9月18日) Vue 3.2 (21年8月10日)#Vue 3.2 +Vite+volarVue3 框架做了大量的性能优化,包括虚拟 DOM...【详细内容】
2022-08-08  Tags: Vue3  点击:(134)  评论:(0)  加入收藏
随着 TienChin 项目视频的录制,松哥终于也要静下心来,认真捋一捋 Vue3 中的各种新特性了,然后再和小伙伴们进行分享,其实 Vue3 中还是带来了很多新鲜的玩意,今天我们就不卷 Java...【详细内容】
2022-07-19  Tags: Vue3  点击:(92)  评论:(0)  加入收藏
引言<<往期回顾>> vue3源码分析&mdash;&mdash;rollup打包monorepo vue3源码分析&mdash;&mdash;实现组件的挂载流程 vue3源码分析&mdash;&mdash;实现props,emit,事件处理等本...【详细内容】
2022-06-21  Tags: Vue3  点击:(93)  评论:(0)  加入收藏
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks...【详细内容】
2022-06-21  Tags: Vue3  点击:(167)  评论:(0)  加入收藏
▌简易百科推荐
TroisJS 是一个基于 Three.js 的 vue3 三维可视化库,TroisJS对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器,并在你的 vue文件 的部分中使用...【详细内容】
2022-10-08  GitHub精选  今日头条  Tags:vue3   点击:(45)  评论:(0)  加入收藏
如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。对于 vue@3.2.34 及以上版本,在使用 <script setup> 的单文件组件时,vue 会...【详细内容】
2022-10-08  NewCheng  今日头条  Tags:vue3   点击:(34)  评论:(0)  加入收藏
第1步. 对项目进行初始化操作:npm init -y由此生成package.json文件。第2步. 安装Vitenpm install vite -D安装成功后会在package.json文件中添加以下内容:"devDependencies":...【详细内容】
2022-10-07  dirac  今日头条  Tags:Vite   点击:(21)  评论:(0)  加入收藏
Vite是下一代前端开发与构建工具。用Vite搭建一个新项目的操作步骤如下。第1步. 新建一个文件夹,并在开发工具中以项目形式打开该文件夹。第2步. 新建一个终端,使用npm安装Vit...【详细内容】
2022-10-07  dirac  今日头条  Tags:Vite   点击:(20)  评论:(0)  加入收藏
我们学习前端能开发什么?随着计算机行业的不断发展,Web前端技术在企业和个人中得到了广泛的应用。Web前端开发人员是一个非常新兴的职业,在计算机行业,Web前端受到了很多关注。...【详细内容】
2022-10-07  科技白茶    Tags:前端开发   点击:(14)  评论:(0)  加入收藏
大家好,我叫Echa哥。微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite...【详细内容】
2022-10-06  Echa攻城狮  今日头条  Tags:微前端   点击:(24)  评论:(0)  加入收藏
前言嗨,大家好,我是希留。近日接到了一个地图选址的需求,大致就是添加地址信息时,需要打开地图,记录详细地址以及经纬度信息。高德地图、百度地图、腾讯地图等主流的地图服务商都...【详细内容】
2022-09-21  希留说  今日头条  Tags:Vue   点击:(95)  评论:(0)  加入收藏
package.json 是前端每个项目都有的 json 文件,位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。package.json 里面有许许多多的配置,与...【详细内容】
2022-09-21  字节跳动技术团队  今日头条  Tags:json   点击:(108)  评论:(0)  加入收藏
您是否在为您的 Web 开发项目选择哪个前端框架而进退两难?以下是顶级前端框架,并确定最适合您的框架。 前端开发人员 负责创建用户在其显示器上看到的材料。毫无疑问,他们正在...【详细内容】
2022-09-21   qaseven     Tags:前端框架   点击:(25)  评论:(0)  加入收藏
前言最近笔者在工作上一直听到后端工程师们在谈论 Microservices(微服务) 的架构设计,听到的当下立马去查询才知道原来 Microservices 这麽潮,身为前端工程师的我当然也希望前...【详细内容】
2022-09-15  前端小智  今日头条  Tags:微前端   点击:(26)  评论:(0)  加入收藏
站内最新
站内热门
站内头条