Design process of Vue.js component library event system (code)

The content of this article is about the design process (code) of the Vue.js component library event system. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s take input-number as an example:

@ is the abbreviation of v-on instruction, used to bind event listeners:

<InputNumber @on-change="change" :max="10" :min="1" v-model="value1">
</InputNumber>

When we use components, A custom event will be registered:

methods: {
    change (v) {
        console.log(v)
    }
}

The way to trigger it inside the component is also very simple:

calls $emit to trigger the current instance event, the event name is on-change

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

Here comes the idea, if the outer layer of InputNumber is nested in a certain FormItem component, The mutual calls between events are also similar, but there is an additional assumption:

Nested relationship, there may be multiple levels of parent and child

Like element and iview More designs A mixins, which provides a method: dispatch

It accepts 3 parameters:

• componentName Component name

• eventName Custom event name

• params Parameters passed by the event

dispatch(componentName, eventName, params) {
}

For example, similar to input-number, many of the components embedded in this form will be designed to interact with FormItem:

this.dispatch('FormItem', 'on-form-change', val);

We are designing FormItem When using components, note:

export default {
    name: 'FormItem'
}

Then register a custom event in the same way:

<Form-item @on-form-change="test">
</Form-item>

Let’s take a look at the inside of the dispatch function:

The idea is to look up the parent element layer by layer:

• ##$parent -- parent instance

• $root -- the root of the component tree Vue instance

var parent = this.$parent || this.$root;

Get the name of the parent component:

var name = parent.$options.name;

Start the loop judgment:

while (parent && (!name || name !== componentName)) {
    // ...
}

For example, the above

input-number Dispatch is called internally and the parameters are passed in, which is to keep looking for the parent element name which is FormItem. Inside the while:

then Find its parent example, and then get the name

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

Finally if found:

is the same as the custom event triggered at the beginning: $emit

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

Related recommendations:

Vue.js component communication child component to parent component communication (code)

Vue.js mobile component library usage method

The above is the detailed content of Design process of Vue.js component library event system (code). For more information, please follow other related articles on the PHP Chinese website!