Vue3 compiler: `defineProps` are referencing locally declared variable

手机游戏开发者 · 2024-9-24 13:10:36

配景

在setup里声明白一个变量，而且在defineProps初始化的时间使用了这个当地变量。
示例：
<script setup>const foo = 'bar'const props = withDefaults(defineProps<

rops>(), { pagination() { return { foo } }})</script>为什么？

首先我们明白SFC有两个scope，一个module scope，一个是setup scope。在setup scope 声明变量，因为defineProps和defineEmit将从setup scope提拔module scope了，从而无法引用setup scope的变量，以是vue判定这里会有题目。
办理方案有两个

1.在SFC里再界说一个module scope来存放这个变量
2.在setup scope通过另外一个文件引入这个变量。
module scope

<script>const foo = 'bar'</script>setup scopes

<script setup>import { foo } from './constant'const props = withDefaults(defineProps<

rops>(), { pagination() { return { foo } }})</script>

Vue3 compiler: `defineProps` are referencing locally declared variable

所属分类: 问答交流

新帖推荐: 30日

推荐作品