本篇文章给大家带来的内容是关于vue.js组件库事件系统的设计过程（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
我们拿 input-number 为例：
@ 是 v-on 指令的简写，用来绑定事件监听器：
我们使用组件的时候，会注册了一个自定义的事件：
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'
}然后注册一个自定义事件，方式也是一样的：
我们来看一下 dispatch 函数的内部：
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
思路是一层一层往上找父元素：
$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));
}相关推荐：
