基本事件处理
使用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 } } }
完美!