怎么在Vue3中使用＜script lang=“ts“ setup＞语法糖

这篇文章主要介绍“怎么在Vue3中使用＜scriptlang=“ts“setup＞语法糖”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在Vue3中使用＜scriptlang=“ts“setup＞语法糖”文章能帮助大家解决问题。以下组件有两个道具（要显示的和一个标志）。基于这两个道具，计算模板中显示的小马图像的URL（通过另一个组件）。该组件还会在用户单击它时发出一个事件。PonyponyModelisRunningImageselectedPony.vue第一步，将属性添加到元素中。然后，我们只需要保留函数的内容：所有的样板都可以消失。您可以删除和中的函数：setupscriptsetupdefineComponentsetupscriptPony.vue我们还可以删除末尾的：在模板中声明的所有顶级绑定（以及所有导入）都自动可用。所以这里和可用，无需返回它们。returnscript setupponyImageUrlclicked声明也是如此！导入组件就足够了，Vue 知道它在模板中使用：我们可以删除声明。componentsImagecomponentsPony.vue我们差不多做到了：我们现在需要迁移和声明。propsemitsVue 提供了一个助手，你可以用它来定义你的道具。它是一个编译时帮助程序（一个宏），所以你不需要在代码中导入它：Vue 在编译组件时会自动理解它。definePropsdefineProps返回道具：defineProps将前一个声明作为参数接收。但是我们可以为TypeScript用户做得更好！propsdefineProps是一般类型化的：你可以在没有参数的情况下调用它，但指定一个接口作为道具的“形状”。没有更可怕的写！我们可以使用正确的 TypeScript 类型，并添加以将 prop 标记为不需要 ???? 。Object as PropType?不过我们丢失了一些信息。在以前的版本中，我们可以指定其默认值为 .为了具有相同的行为，我们可以使用帮助程序：isRunningfalsewithDefaults要迁移的最后一个剩余语法是声明。emitsVue 提供了一个帮助程序，与帮助程序非常相似。返回函数：defineEmitsdefinePropsdefineEmitsemit或者更好的是，使用TypeScript：完整组件声明缩短了 10 行。对于~30行组件来说，这不是一个糟糕的减少！它更容易阅读，并且与TypeScript配合得更好。让所有内容自动暴露到模板中确实感觉有点奇怪，但是没有写回车符，但是您已经习惯了。Pony.vue声明组件的两种方法之间有一个更细微的区别：组件是“默认关闭的”。这意味着其他组件看不到组件内部定义的内容。script setup例如，组件可以访问该组件（通过使用 refs，我们将在下一章中看到）。如果定义为，则函数返回的所有内容对于父组件（）也是可见的。如果用定义，则父组件不可见。可以通过添加助手来选择暴露的内容。然后，公开的将作为访问。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefi免费云主机域名neExpose({ key: value })valuekey关于“怎么在Vue3中使用＜scriptlang=“ts“setup＞语法糖”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: 断电后php文件乱码如何解决

这篇文章主要介绍了断电后php文件乱码如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇断电后php文件乱码如何解决文章都会有所收获，下面我们一起来看看吧。断电后php文件乱码的解决办法：1、重启电脑；2、用phpstorm…