- vue.prototype.$on = function (event, fn) {
- const hookRE = /^hook:/ // 检测自定义事件名是否是 hook: 开头
- const vm = this
- if (Array.isArray(event)) { // 如果第一个参数是数组
- for (let i = 0; i < event.length; i++) {
- this.$on(event[i], fn) // 递归
- }
- } else {
- (vm._events[event] || (vm._events[event] = [])).push(fn)
- // 如果有对应事件名就 push, 没有创建为空数组然后 push
- if (hookRE.test(event)) { // 如果是 hook: 开头
- vm._hasHookEvent = true // 标志位为 true
- }
- }
- return vm
- }
- Vue.prototype.$emit = function (event) {
- const vm = this
- let cbs = vm._events[event] // 找到事件名对应的回调集合
- if (cbs) {
- const args = toArray(arguments, 1) // 将附加参数转为数组
- for (let i = 0; i < cbs.length; i++) {
- cbs[i].apply(vm, args) // 挨个执行对应的回调集合
- }
- }
- return vm
- }
在组件 (当前组件实例) 的 $on 和 $emit 的执行原理:
$on 往当前组件实例的事件中心 (this._events) 添加自定义事件
$emit 在事件中心找到对应的自定义事件后调用事件
父子组件通过 @传递事件详解:
父组件在编译模板后将子组件 (@自定义事件 ="回调") 的自定义事件及其回调通过 $on 添加到子组件的事件中心(this._events)
来源: http://www.bubuko.com/infodetail-3189835.html