基本事件处理
使用v-on
指令(简称@
),我们可以监听DOM事件并运行处理程序方法或内联Javascript。
// v-on 指令
<div v-on:click='handleClick' />
// OR
<div @click='handleClick' />
向父组件发出自定义事件
任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也是双向数据绑定原理。
常见一个示例是将数据从 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 }
}
}
完美!