每个 Vue 实例都实现了事件接口,即:
- 使用
$on(eventName)
监听事件 - 使用
$emit(eventName)
触发事件
Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们的运行起来类似,但是 $on
和 $emit
并不是addEventListener
和 dispatchEvent
的别名。
另外,父组件可以在使用子组件的地方直接用 v-on
来监听子组件触发的事件。
下面通过个小例子来解释下该怎么进行父子组件间的监听:
1、在子组件绑定 “clickEvent” 绑定事件:
<template> <div> <a @click="clickEvent"> </a> </div> </template>
2、自组件 methods 里注册监听:
methods: { clickEvent () { this.$emit('quit', ‘这个位子是可以加参数的’); } }
3、在父组件里,绑定 quit 事件,进行监听:
<template> <div> <a @quit="quit"></a> </div> <template>
4、methods 里处理事件:
methods: { quit (参数) { this.$router.push('first-login'); // 跳转到 first-login 页面
}
}