Processus de conception du système d'événements de la bibliothèque de composants Vue.js (code)

Le contenu de cet article concerne le processus de conception (code) du système d'événements de la bibliothèque de composants Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Prenons comme exemple le numéro d'entrée :

@ est l'abréviation de l'instruction v-on, utilisée pour lier les écouteurs d'événements :

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

Nous utilisons le composant temps, un événement de 自定义 sera enregistré :

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

La façon de le déclencher à l'intérieur du composant est également très simple :

appelle $emit pour déclencher l'événement sur l'instance en cours, et le nom de l'événement est on-change

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

Voici l'idée. Si la couche externe InputNumber est imbriquée dans un certain composant FormItem, les appels mutuels entre les événements sont similaires, mais il existe une hypothèse supplémentaire. :

Relations imbriquées, il peut y avoir plusieurs niveaux parent-enfant

comme element et iview sont conçus avec un plus mixins, qui fournit une méthode : dispatch

Il accepte les 3 Paramètres :

• componentName nom du composant

• eventName Nom de l'événement personnalisé

• params passés par l'événement Paramètres

dispatch(componentName, eventName, params) {
}

Par exemple, comme input-number, de nombreux composants intégrés dans ce formulaire seront conçus pour interagir avec FormItem :

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

Nous Lors de la conception du composant FormItem, notez :

export default {
    name: 'FormItem'
}

Enregistrez ensuite un événement personnalisé de la même manière :

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

Jetons un coup d'œil à l'intérieur de la dépêche fonction :

L'idée est de retrouver l'élément parent couche par couche :

• $parent -- instance parent

• $root -- L'instance racine de Vue de l'arborescence des composants

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

Obtenez le nom du composant parent :

var name = parent.$options.name;

Démarrez le jugement de la boucle :

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

Par exemple, le input-number ci-dessus appelle dispatch en interne et transmet les paramètres. Il continue de rechercher l'élément parent name qui est FormItem à l'intérieur du while :

et. puis le recherche. L'exemple parent, puis obtient le nom

Enfin s'il est trouvé :

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

est le même que le déclenchement initial de l'événement personnalisé : $emit

recommandé associé :

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

Communication du composant Vue.js, composant enfant vers la communication du composant parent (code)

Vue.js Méthode d'utilisation de la bibliothèque de composants mobiles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!