Vue.js组件库事件系统的设计过程（代码）-js教程-PHP中文网

Vue.js组件库事件系统的设计过程（代码）

不言

发布： 2018-09-10 17:19:46

原创

1676人浏览过

本篇文章给大家带来的内容是关于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-change

this.$emit('on-change', val);

登录后复制

那思路来了，如果 InputNumber 外层嵌套在了某一个 FormItem 组件里面，事件之间的互相调用也是类似的，只是多了个假设：

嵌套关系，可能有多级父子

像 element 和 iview 多设计了一个 mixins，里面提供了一个方法：dispatch

它接受 3 个参数：

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 函数的内部：

思路是一层一层往上找父元素：

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));
}

登录后复制