本篇文章给大家带来的内容是关于Vue.js组件库事件系统的设计过程（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
我们拿 input-number 为例：
@ 是 v-on 指令的简写，用来绑定事件监听器：
<InputNumber @on-change="change" :max="10" :min="1" v-model="value1"> </InputNumber>
我们使用组件的时候，会注册了一个自定义的事件：
methods: {
change (v) {
console.log(v)
}
}在组件内部触发的方式也很简单：
调用了$emit 来触发当前实例上的事件，事件名为 on-changethis.$emit('on-change', val);那思路来了，如果 InputNumber 外层嵌套在了某一个 FormItem 组件里面，事件之间的互相调用也是类似的，只是多了个假设：
像 element 和 iview 多设计了一个 mixins，里面提供了一个方法：dispatch
它接受 3 个参数：
componentName 组件名
eventName 自定义事件名称
params 事件传递的参数
dispatch(componentName, eventName, params) {
}比如类似 input-number，很多这种表单内嵌的组件，都会设计和 FormItem 的互动：
this.dispatch('FormItem', 'on-form-change', val);我们在设计 FormItem组件的时候，注意：
export default {
name: 'FormItem'
}然后注册一个自定义事件，方式也是一样的：
<Form-item @on-form-change="test"> </Form-item>
我们来看一下 dispatch 函数的内部：
思路是一层一层往上找父元素：
$parent -- 父实例
$root -- 组件树的根 Vue 实例
var parent = this.$parent || this.$root;
获取父组件的 name:
var name = parent.$options.name;
开始循环判断：
while (parent && (!name || name !== componentName)) {
// ...
}比如上面的input-number 内部调用了 dispatch，传入了参数，就是一直找父元素 name 为 FormItem 的
在 while 的内部：
接着找它的父示例，然后获取 name
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}最终如果找到了：
和最开始触发自定义事件是一样的：$emit
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}相关推荐：
以上是Vue.js组件库事件系统的设计过程（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
