Vue 3.2+ uses defineProps and defineEmits apis in 

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

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

If you write this, the compilation will report an error, as follows:

Syntax Error: TypeError: Cannot read properties of null (reading ‘content’) …

Then I tried printing it, and the output was unexpected

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

Error:

defineEmits is not defined

After poking around, it turns out that this is really just a “compilation flag” (not a function) that must be used strictly according to the “rules” otherwise it is unrecognizable.

Proper posture:

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

This can not use the use of variables, the reuse is slightly worse, an event name in the definition of time to write again, in the use of time to write again, if more than one place to use it will need to write more than one time, a bit of pain, to ancestors to issue to ~