Vue事件处理指南

基本事件处理

使用v-on指令(简称@)，我们可以监听DOM事件并运行处理程序方法或内联Javascript。

// v-on 指令// OR

向父组件发出自定义事件

任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件，这也是双向数据绑定原理。

常见一个示例是将数据从input组件发送到父表单。

根据我们使用的是Options API还是Composition API，发出事件的语法是不同的。

在 Options API 中，我们可以简单地调用this.$emit(eventName, payload) ,示例如下：

exportdefault{ methods: { handleUpdate:()=>{this.$emit('update','Hello World') } }}

但是，Composition API 使用方式与此不同。需要在 Vue3 提供的setup方法使用emit方法。

只要导入context对象，就可以使用与Options API相同的参数调用emit。

exportdefault{ setup (props, context) { const handleUpdate =()=>{ context.emit('update','Hello World') }return{ handleUpdate } } }

当然，我在项目中经常使用解构的方式来使用：

exportdefault{ setup (props, { emit }) { const handleUpdate =()=>{ emit('update','Hello World') }return{ handleUpdate } } }

完美！