ToB企服应用市场:ToB评测及商务社交产业平台

标题: 如何在 Vue 3 中使用＜script lang=“ts“ setup＞语法糖 [打印本页]

作者: 王海鱼 时间: 2022-6-25 13:54
标题: 如何在 Vue 3 中使用＜script lang=“ts“ setup＞语法糖
如何在 Vue 3 中使用＜script lang=“ts“ setup＞语法糖

Vue 3.2 引入了语法，这是一种稍微不那么冗长的声明组件的方式。您可以通过向 SFC 的元素添加属性来启用它，然后可以删除组件中的一些样板。script setupsetupscript
  让我们举一个实际的例子，并将其迁移到这个语法！
  迁移组件

  以下组件有两个道具（要显示的和一个标志）。基于这两个道具，计算模板中显示的小马图像的URL（通过另一个组件）。该组件还会在用户单击它时发出一个事件。PonyponyModelisRunningImageselected
  Pony.vue

<template>
<figure @click="clicked()">
<Image :src="ponyImageUrl" :alt="ponyModel.name" />
<figcaption>{{ ponyModel.name }}</figcaption>
</figure>
</template>

复制代码

   第一步，将属性添加到元素中。然后，我们只需要保留函数的内容：所有的样板都可以消失。您可以删除和中的函数：setupscriptsetupdefineComponentsetupscript
  Pony.vue

[/code] [size=5]隐式返回[/size]
我们还可以删除末尾的：在模板中声明的所有顶级绑定（以及所有导入）都自动可用。所以这里和可用，无需返回它们。returnscript setupponyImageUrlclicked
声明也是如此！导入组件就足够了，Vue 知道它在模板中使用：我们可以删除声明。componentsImagecomponents
Pony.vue
[code]

复制代码

我们差不多做到了：我们现在需要迁移和声明。propsemits
  defineProps

  Vue 提供了一个助手，你可以用它来定义你的道具。它是一个编译时帮助程序（一个宏），所以你不需要在代码中导入它：Vue 在编译组件时会自动理解它。defineProps
  defineProps返回道具：

const props = defineProps({
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
});

复制代码

defineProps将前一个声明作为参数接收。但是我们可以为TypeScript用户做得更好！props

defineProps是一般类型化的：你可以在没有参数的情况下调用它，但指定一个接口作为道具的“形状”。没有更可怕的写！我们可以使用正确的 TypeScript 类型，并添加以将 prop 标记为不需要
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)