Vue3$emitGuide--包括optionAPI、combinationAPI和setup语法糖

有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。许多Vue模式涉及使用props将数据从父组件传递到子组件。但是如果我们需要一个子组件将数据传递给它的父组件怎么办？使用emit我们可以触发事件并将数据传递到组件层次结构中。这在多种情况下很有用，例如：从输入中发射数据从模态本身内部关闭模态响应子组件的父组件VueEmit是如何工作的？当我们发出一个事件时，我们调用一个带有一个或多个参数的方法：eventName:string-事件的名称值：any-通过事件传递的参数下面是一个内联发出的例子，.发出一个名为add的事件，并将Math.random()的值作为参数传递。然后，在父组件中使用v-on或@指令来监听我们自定义的add事件并接收参数值。Child.vue在Parent.vue中监听：每一次我们单击按钮，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种不同的方法来执行此操作：OptionsAPI-this.$emitCompositionAPIwithsetup()-context.emitCompositionAPIwithexportdefault{methods:{handleChange(event){this.$emit("customChange",event.target.value.toUpperCase())}}}在Parent.vue中收到：CompositionAPIwithsetup()-context.emitincompositionAPI如果使用了setup函数，则不能再使用this，即不能调用this.$emit()方法。相反，可以使用setup方法中的第二个参数上下文访问emit方法。我们可以使用之前使用的事件名称和值调用context.emit。MyTextInput.vue