Vue事件处理思路【详细教程】

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

// v-on 指令

// OR

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

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

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

export default {
methods: {
handleUpdate: () => {
this.$emit(‘update’, ‘Hello World’)
}
}
}
但是，Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup方法使用emit方法。

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

export default {
setup (props, context) {
const handleUpdate = () => {
context.emit(‘update’, ‘Hello World’)
}

return { handleUpdate }

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

export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit(‘update’, ‘Hello World’)
}

return { handleUpdate }

}
}
完美！