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:

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:

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;

var name = parent.$options.name;

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

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:

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

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

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!