# 事件 API
非兼容
# 概览
$on
,$off
和 $once
实例方法已被移除,应用实例不再实现事件触发接口。
# 2.x 语法
在 2.x 中,Vue 实例可用于触发由事件触发 API 通过指令式方式添加的处理函数 ($on
,$off
和 $once
)。这可以创建 event hub,用来创建在整个应用程序中可用的全局事件监听器:
// eventHub.js
const eventHub = new Vue()
export default eventHub
1
2
3
4
5
2
3
4
5
// ChildComponent.vue
import eventHub from './eventHub'
export default {
mounted() {
// 添加 eventHub 监听器
eventHub.$on('custom-event', () => {
console.log('Custom event triggered!')
})
},
beforeDestroy() {
// 移除 eventHub 监听器
eventHub.$off('custom-event')
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ParentComponent.vue
import eventHub from './eventHub'
export default {
methods: {
callGlobalCustomEvent() {
eventHub.$emit('custom-event') // 当 ChildComponent 被挂载,控制台中将显示一条消息
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.x 更新
我们从实例中完全移除了 $on
、$off
和 $once
方法。$emit
仍然包含于现有的 API 中,因为它用于触发由父组件声明式添加的事件处理函数。
# 迁移策略
可以使用实现了事件触发接口的外部库来替换现有的 event hub,例如 mitt (opens new window) 或 tiny-emitter (opens new window)。
兼容性构建中也支持这些方法。
加入前端布道师交流群
扫描二维码回复 加群 学习,与大厂大佬讨论技术.
← emits Option 过滤器 →