vm._events = Object.create(null) // 没有__proto__属性

export default {created() {this.$on('test', res => {console.log(res)    })},methods: {handleClick() {this.$emit('test', 'hello-vue~')}}
}

Vue.prototype.$on = function (event, fn) {const hookRE = /^hook:/    //检测自定义事件名是否是hook:开头const vm = thisif (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，没有创建为空数组然后pushif (hookRE.test(event)) {  // 如果是hook:开头vm._hasHookEvent = true  // 标志位为true}}return vm
}

Vue.prototype.$emit = function (event) {const vm = thislet 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
}

app.vue
<template><child-component @test='handleTest' />
</template>
export default {methods: {handleTest(res) {console.log(res)}}
}----------------------------------------child.vue
<template><button @click='onClick'>btn</button>
</template>
export default {methods: {onClick() {this.$emit('test', 'hello-vue~')}}
}

app.vue
<template><child-component @hook:created='handleHookEvent' />
</template>

监听组件钩子之前：
mounted () {this.picker = new Pikaday({  // Pikaday是一个日期选择库field: this.$refs.input,format: 'YYYY-MM-DD'})
},
beforeDestroy () {  // 销毁日期选择器this.picker.destroy()
}监听组件钩子之后：
mounted() {this.attachDatepicker('startDateInput')this.attachDatepicker('endDateInput')  // 同时为两个input添加日期选择
},
methods: {attachDatepicker(refName) {  // 封装为一个方法const picker = new Pikaday({  // Pikaday是一个日期选择库field: this.$refs[refName],  // 为input添加日期选择format: 'YYYY-MM-DD'})this.$once('hook:beforeDestroy', () => {  // 监听beforeDestroy钩子picker.destroy()  // 销毁日期选择器})  // $once和$on类似，只是只会触发一次}
}

export default {methods: {  // 混入mixin使用dispatch(componentName, eventName, params) {let parent = this.$parent || this.$root  // 找父组件let name = parent.$options.name  // 父组件的name属性while (parent && (!name || name !== componentName)) {  // 和传入的componentName进行匹配parent = parent.$parent  // 一直向上查找if (parent) {name = parent.$options.name  // 重新赋值name}}if (parent) {  // 找到匹配的组件实例parent.$emit.apply(parent, [eventName].concat(params))  // $emit触发自定义事件}}}
}

iForm组件：<template><div> <slot /> </div>  // 只有一个插槽
</template><script>
export default {name: "iForm",  // 组件名很重要data() {return {fields: []  // 收集所有表单项的集合};},created() {this.$on("on-form-item-add", field => {  // $on必须得比$emit先执行，因为要先添加嘛this.fields.push(field)  // 添加到集合内});},methods: {validataAll() {  // 验证所有的接口方法this.fields.forEach(item => {item.validateVal()  // 执行每个表单项内的validateVal方法});}}
};
</script>

<template><div><input v-model="curValue" style="border: 1px solid #aaa;" /><span style="color: red;" v-show="showTip">输入不能为空</span></div>
</template><script>
import emitter from "./emitter"  // 引入之前的dispatch方法export default {name: "iFormItem",mixins: [emitter],  // 混入data() {return {curValue: "",  // 表单项的值showTip: false  // 是否验证通过};},created() {this.dispatch("iForm", "on-form-item-add", this)  // 将当前实例传给iForm组件},methods: {validateVal() {  // 某个表单项的验证方法if (this.curValue === "") {  // 不能为空this.showTip = true  // 验证不通过}}}
};
</script>

<template><div><i-form ref='form'>  // 引用<i-form-item /><i-form-item /><i-form-item /><i-form-item /><i-form-item /></i-form><button @click="submit">提交</button></div>
</template><script>
import iForm from "./form"
import iFormItem from "./form-item"export default {methods: {submit() {this.$refs['form'].validataAll() // 验证所有}},components: {iForm, iFormItem}
};
</script>

export default {created() {this.$on('test1', this.test1)this.$on('test2', this.test2)},mounted() {this.$off()  // 没有参数，清空事件中心}
}-------------------------------------------export default {created() {this.$on('test1', this.test1)this.$on('test2', this.test2)},mounted() {this.$off('test1')  // 在事件中心中移除test1}
}-------------------------------------------export default {created() {this.$on('test1', this.test1)this.$on('test1', this.test3)this.$on('test2', this.test2)},mounted() {this.$off('test1', this.test3)  // 在事件中心中移除事件test1的test3回调}
}

Vue.prototype.$off = function (event, fn) {const vm = thisif (!arguments.length) {  // 如果没有传递参数vm._events = Object.create(null)  // 重置事件中心return vm}if (Array.isArray(event)) {  // event如果是数组for (let i = 0, l = event.length; i < l; i++) {vm.$off(event[i], fn)  // 递归清空}return vm}if (!fn) {  // 只传递了事件名没回调vm._events[event] = null  // 清空对应所有的回调return vm}const cbs = vm._events[event]  // 获取回调集合let cblet i = cbs.lengthwhile (i--) {cb = cbs[i]  // 回调集合里的每一项if (cb === fn || cb.fn === fn) {  // cb.fn为$once时挂载的cbs.splice(i, 1)  // 找到对应的回调，从集合内移除break}}return vm
}

Vue.prototype.$once = function (event, fn) {const vm = thisfunction on () {vm.$off(event, on)fn.apply(vm, arguments)}on.fn = fn  // 回调挂载到on下，移除时好做判断vm.$on(event, on)  // 将on添加到事件中心中return vm
}