www.ydisp.cn/oss/202207/13/c83f0f6675bf9bbb03c3656b051f207a3bf3e5.gif"alt="image"title="image"style="width:872像素；能见度：可见；height:544px;"data-type="block">每次我们点击按钮，Child.vue都会发出一个add事件，其值在0到1之间。然后，Parent.vue捕获这个事件并将这个值添加到计数。可以传递任意数量的参数，侦听器将接收所有参数：Child-$emit('add',Math.random(),44,50)Parent-@add="(i,j,k)=>count+=i+j+k"现在，我们知道如何在我们的模板中发出内联事件，但在更复杂的示例中，如果我们从SFC中的脚本发出一个事件会更好。这特别有用当我们想在发出事件之前执行一些逻辑时。在Vue3中，我们有2种不同的方法来执行此操作：选项API-this.$emit与setup()的组合API-context.emit与exportdefault{methods:{handleChange(event){this.$emit("customChange",event.target.value.toUpperCase())}}}
在Parent.vue中收到：
ComposingAPIwithsetup()-context.emit在CompositionAPI中，如果使用了setup函数，则不能再使用this，即你不能调用this.$emit()方法。相反，可以使用setup方法中的第二个参数context访问emit方法。我们可以使用之前使用的事件名称和值调用context.emit。MyTextInput.vue
但是，如果我们传递一个对象，我们可以为每个事件添加一个验证器函数，我们可以在其中检查值是否符合我们需要的格式。像事件侦听器一样，验证器接受我们传入的所有参数。这类似于prop验证，如果我们的验证器返回false，我们将在控制台中收到警告，这为我们提供了一些有用的信息。MyTextInput.vue使用emits定义自定义事件的最佳实践如果我们不使用defineEmits，我们仍然可以通过在exportdefault中定义emits选项来跟踪组件的自定义事件。这对于维护良好的组件文档很重要，如果我们尝试使用未在emits中声明的事件，我们也会从Vue收到错误。当在emits选项中定义了本机事件（例如更改）时，将使用来自组件的事件而不是本机事件侦听器。
正确的事件命令在vue3中，像组件和道具一样，事件名称提供自动大小写转换。如果您在子组件中触发驼峰命名事件，您将能够在父组件中添加一个kebab-case侦听器。但是，如果您使用的是Vue2，事件名称没有自动大小写转换，并且由于v-on指令会自动将您的事件名称转换为小写，因此无法监听驼峰命名的事件。例如，如果我们发出一个名为myEvent的事件，则监听my-event将不起作用。作者：Noveo译者：小智来源：learnvue原文：https://learnvue.co/tutorals/vue-emit-guide
