摘要：我们拿为例是指令的简写，用来绑定事件监听器我们使用组件的时候，会注册了一个自定义的事件在组件内部触发的方式也很简单调用了来触发当前实例上的事件，事件名为那思路来了，如果外层嵌套在了某一个组件里面，事件之间的互相调用也是类似的，只
我们拿 input-number 为例：
@ 是 v-on 指令的简写，用来绑定事件监听器：
我们使用组件的时候，会注册了一个自定义的事件：
methods: {
change (v) {
console.log(v)
}
}
在组件内部触发的方式也很简单：
调用了 $emit 来触发当前实例上的事件，事件名为 on-change
this.$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 函数的内部：
思路是一层一层往上找父元素：
$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));
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97639.html
摘要：组件监听自定义事件。组件触发自定义事件。生命周期钩子函数，后组件的所有的事件监听器会被移除。技术点总结组件设计的思想包括单数据流事件中心，核心是组件通信。完善给弹出日期面板和关闭日期面板增加组件自定义事件即调用触发和事件。预览 组件库官网 github地址 如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈， 请勿在生产环境中使用，供学习&交流~~ showImg(https://user...
阅读 1265·2023-04-26 00:35
阅读 2689·2023-04-25 18:32
阅读 3315·2021-11-24 11:14
阅读 758·2021-11-22 15:24
阅读 1362·2021-11-18 10:07
阅读 6311·2021-09-22 10:57
阅读 2755·2021-09-07 09:58
阅读 3547·2019-08-30 15:54
