如何在 Vue 3 中使用＜script lang=“ts“ setup＞语法糖

如何在 Vue 3 中使用＜script lang=“ts“ setup＞语法糖

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

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

1. <template>
2.   <figure @click="clicked()">
3.     <Image :src="ponyImageUrl" :alt="ponyModel.name" />
4.     <figcaption>{{ ponyModel.name }}</figcaption>
5.   </figure>
6. </template>

复制代码

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

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

复制代码

      

---

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

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

1. const props = defineProps({
2.   ponyModel: {
3.     type: Object as PropType<PonyModel>,
4.     required: true
5.   },
6.   isRunning: {
7.     type: Boolean,
8.     default: false
9.   }
10. });

复制代码

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