翻译：在Vue单文件组件中使用两个script块

原文地址：Using two script blocks in Vue Single File Components

我最近在开发 Vue 组件时遇到了一个问题 - 我想创建一个具有逻辑和 UI 的组件，并从中导出 TypeScript 特定实体，例如接口或枚举。我使用脚本设置语法实现了第一部分。我不知道该怎么办，但我的朋友与我分享了解决我问题的方法。

有趣的是，这并不是什么肮脏的把戏，而是 Vue 完全支持和记录的功能，您可以在此处阅读更多信息。

在这篇文章中，我想向您展示如何在一个 Vue 组件中使用两个脚本块，以便您在遇到类似问题时可以解决它。

在 Vue 中使用两个 script 块

作为示例，让我们看一下以下组件，该组件将负责创建一个带有字母的 div 元素。它将接受两个props letter 和 size 。

vue

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
    letter: {
        type: String,
        default: '',
    },
    size: {
        type: String as PropType<`${LetterSize}`>,
        default: LetterSize.BASE,
    },
});

const classList = computed(() => {
    const classes = {
        [LetterSize.SM]: ['w-[20px] h-[20px] text-[12px]'],
        [LetterSize.BASE]: ['w-[24px] h-[24px] text-[14px]'],
        // others
    };

    return classes[props.size];
});
</script>

<script lang="ts">
export enum LetterSize {
    SM = 'sm',
    BASE = 'base',
    LG = 'lg',
    XL = 'xl',
}
</script>

<template>
    <div :class="classList">
        {{ letter }}
    </div>
</template>

代码很多，但让我们分别讨论每个部分：

在模板部分，我们有一个 div，它将根据大小输出字母和计算的类列表。
在第一个脚本部分（setup）中，我们从 vue 导入实用程序，声明组件 props，并创建一个计算属性以根据 prop 计算字母的正确大小。
在第二个脚本部分，我们声明一个字母大小的枚举

通过这种方法，我们可以将组件和枚举导入到另一个组件中，如下所示：

vue

<script setup lang="ts">
import Letter, { LetterSize } from '@/components/atoms/Letter.vue';
</script>

然后在模板中使用它，如下所示：

vue

<template>
    <Letter
        :size="LetterSize.XL"
        letter="X"
    />
</template>

您可能还想在其他情况下使用此功能，例如：

使用选项 API 声明无法在<script setup>中表达的选项，例如， inheritAttrs或通过插件启用的自定义选项。
运行side effects或创建只应执行一次的对象，因为setup()会为每个组件运行。
声明命名导出，允许从一个文件导出多个内容。

请在此处阅读有关此功能的更多信息。

总结

干得好！您刚刚学习了如何在 Vue 单文件组件中使用两个脚本块！

保重，下次再见！

And happy coding as always 🖥️

翻译：在Vue单文件组件中使用两个script块

在 Vue 中使用两个 script 块

总结

翻译：在 Vue 中构建递归组件

翻译：使用 Vitest 测试 Vue 组件

评论区