[{"data":1,"prerenderedAt":178},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fusing-two-script-blocks-in-vue-single-file-components":3,"surround:\u002Fposts\u002F2025\u002Fusing-two-script-blocks-in-vue-single-file-components":167},{"id":4,"title":5,"body":6,"canonical":16,"categories":147,"date":149,"description":37,"draft":150,"extension":151,"image":152,"meta":153,"navigation":154,"path":155,"permalink":152,"readingTime":156,"recommend":152,"references":152,"seo":161,"sitemap":162,"stem":163,"tags":164,"type":152,"updated":149,"__hash__":166},"content\u002Fposts\u002F2025\u002Fusing-two-script-blocks-in-vue-single-file-components.md","【翻译】在Vue单文件组件中使用两个script块",{"type":7,"value":8,"toc":141},"minimark",[9,20,23,26,35,38,43,55,65,68,81,84,90,93,99,102,122,129,132,135,138],[10,11,12,13],"p",{},"原文地址：",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fusing-two-script-blocks-in-vue-single-file-components-29l4",[18],"nofollow","Using two script blocks in Vue Single File Components",[21,22],"hr",{},[10,24,25],{},"我最近在开发 Vue 组件时遇到了一个问题 - 我想创建一个具有逻辑和 UI 的组件，并从中导出 TypeScript 特定实体，例如接口或枚举。我使用脚本设置语法实现了第一部分。我不知道该怎么办，但我的朋友与我分享了解决我问题的方法。",[10,27,28,29,34],{},"有趣的是，这并不是什么肮脏的把戏，而是 Vue 完全支持和记录的功能，您可以",[14,30,33],{"href":31,"rel":32},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fsfc-script-setup.html?ck_subscriber_id=1460864714#usage-alongside-normal-script",[18],"在此处","阅读更多信息。",[10,36,37],{},"在这篇文章中，我想向您展示如何在一个 Vue 组件中使用两个脚本块，以便您在遇到类似问题时可以解决它。",[39,40,42],"h2",{"id":41},"在-vue-中使用两个-script-块","在 Vue 中使用两个 script 块",[10,44,45,46,50,51,54],{},"作为示例，让我们看一下以下组件，该组件将负责创建一个带有字母的 div 元素。它将接受两个props ",[47,48,49],"code",{"code":49},"letter"," 和 ",[47,52,53],{"code":53},"size"," 。",[56,57,63],"pre",{"className":58,"code":60,"language":61,"meta":62},[59],"language-vue","\u003Cscript lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n    letter: {\n        type: String,\n        default: '',\n    },\n    size: {\n        type: String as PropType\u003C`${LetterSize}`>,\n        default: LetterSize.BASE,\n    },\n});\n\nconst classList = computed(() => {\n    const classes = {\n        [LetterSize.SM]: ['w-[20px] h-[20px] text-[12px]'],\n        [LetterSize.BASE]: ['w-[24px] h-[24px] text-[14px]'],\n        \u002F\u002F others\n    };\n\n    return classes[props.size];\n});\n\u003C\u002Fscript>\n\n\u003Cscript lang=\"ts\">\nexport enum LetterSize {\n    SM = 'sm',\n    BASE = 'base',\n    LG = 'lg',\n    XL = 'xl',\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"classList\">\n        {{ letter }}\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[47,64,60],{"__ignoreMap":62},[10,66,67],{},"代码很多，但让我们分别讨论每个部分：",[69,70,71,75,78],"ol",{},[72,73,74],"li",{},"在模板部分，我们有一个 div，它将根据大小输出字母和计算的类列表。",[72,76,77],{},"在第一个脚本部分（setup）中，我们从 vue 导入实用程序，声明组件 props，并创建一个计算属性以根据 prop 计算字母的正确大小。",[72,79,80],{},"在第二个脚本部分，我们声明一个字母大小的枚举",[10,82,83],{},"通过这种方法，我们可以将组件和枚举导入到另一个组件中，如下所示：",[56,85,88],{"className":86,"code":87,"language":61,"meta":62},[59],"\u003Cscript setup lang=\"ts\">\nimport Letter, { LetterSize } from '@\u002Fcomponents\u002Fatoms\u002FLetter.vue';\n\u003C\u002Fscript>\n",[47,89,87],{"__ignoreMap":62},[10,91,92],{},"然后在模板中使用它，如下所示：",[56,94,97],{"className":95,"code":96,"language":61,"meta":62},[59],"\u003Ctemplate>\n    \u003CLetter\n        :size=\"LetterSize.XL\"\n        letter=\"X\"\n    \u002F>\n\u003C\u002Ftemplate>\n",[47,98,96],{"__ignoreMap":62},[10,100,101],{},"您可能还想在其他情况下使用此功能，例如：",[103,104,105,112,119],"ul",{},[72,106,107,108,111],{},"使用选项 API 声明无法在",[47,109,110],{"code":110},"\u003Cscript setup>","中表达的选项，例如， inheritAttrs或通过插件启用的自定义选项。",[72,113,114,115,118],{},"运行side effects或创建只应执行一次的对象，因为",[47,116,117],{"code":117},"setup()","会为每个组件运行。",[72,120,121],{},"声明命名导出，允许从一个文件导出多个内容。",[10,123,124,125,128],{},"请",[14,126,33],{"href":31,"rel":127},[18],"阅读有关此功能的更多信息。",[39,130,131],{"id":131},"总结",[10,133,134],{},"干得好！您刚刚学习了如何在 Vue 单文件组件中使用两个脚本块！",[10,136,137],{},"保重，下次再见！",[10,139,140],{},"And happy coding as always 🖥️",{"title":62,"searchDepth":142,"depth":142,"links":143},4,[144,146],{"id":41,"depth":145,"text":42},2,{"id":131,"depth":145,"text":131},[148],"译","2025-01-14 11:02:22",false,"md",null,{},true,"\u002Fposts\u002F2025\u002Fusing-two-script-blocks-in-vue-single-file-components",{"text":157,"minutes":158,"time":159,"words":160},"4 min read",3.21,192600,642,{"title":5,"description":37},{"loc":155},"posts\u002F2025\u002Fusing-two-script-blocks-in-vue-single-file-components",[165],"Vue","b-oAmKf0V6OxARiGbD0pUgXDz_hzoacgbtQ7P9Vq3rk",[168,173],{"title":169,"path":170,"stem":171,"date":172,"type":152,"children":-1},"【翻译】使用 Vitest 测试 Vue 组件","\u002Fposts\u002F2025\u002Ftesting-vue-components-with-vitest","posts\u002F2025\u002Ftesting vue components with vitest","2025-01-14 10:12:32",{"title":174,"path":175,"stem":176,"date":177,"type":152,"children":-1},"【翻译】在 Vue 中构建递归组件","\u002Fposts\u002F2025\u002Fbuilding-recursive-components-in-vue","posts\u002F2025\u002FBuilding-Recursive-components-in-Vue","2025-01-14 13:46:17",1789642590874]