Vue 3.2+ 中的一些坑

Vue 3.2+ 在<script setup>中使用defineProps、defineEmits这些API，如果参数使用的是变量，就会报错，直接传入预期的参数才是正常的，如下：

<script setup>
import { defineEmits } from 'vue';

const CLOSE_MODAL_EVENT = 'close';
const emit = defineEmits([CLOSE_MODAL_EVENT]);
</script>

如果这样写，编译会报错，如下：

Syntax Error: TypeError: Cannot read properties of null (reading 'content') ...

然后试着打印一下，输出结果出乎意料

<script setup>
import { defineEmits } from 'vue';
console.log(typeof defineEmits); // undefined
console.log('defineEmits', defineEmits);
</script>

报错：

defineEmits is not defined

捣腾了一圈，发现这其实只是一个“编译标识”（并不是一个函数），必须严格按照“规则”使用，否则无法识别。

正确的姿势：

<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['close']);
</script>

这样无法用使用变量，复用性就稍微差一点，一个事件名称在定义的时候要写一遍，在使用的时候也要写一遍，如果多个地方使用就需要写多遍，有点蛋疼，给祖师爷提issue去~