欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-28 07:49:39
...
本篇文章给大家带来的内容是关于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 组件里面,事件之间的互相调用也是类似的,只是多了个假设:

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

elementiview 多设计了一个 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,传入了参数,就是一直找父元素 nameFormItem

在 while 的内部:

接着找它的父示例,然后获取 name

parent = parent.$parent;
if (parent) {
    name = parent.$options.name;
}

最终如果找到了:

和最开始触发自定义事件是一样的:$emit

if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
}

相关推荐:

Vue.js组件的通信之子组件向父组件的通信(代码)

Vue.js移动端组件库使用方法

以上就是Vue.js组件库事件系统的设计过程(代码)的详细内容,更多请关注其它相关文章!