Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2018-09-10 17:19:46
original
1385 Les gens l'ont consulté

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>
Copier après la connexion

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

methods: {
    change (v) {
        console.log(v)
    }
}
Copier après la connexion

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);
Copier après la connexion

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) {
}
Copier après la connexion

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);
Copier après la connexion

Nous Lors de la conception du composant FormItem, notez :

export default {
    name: 'FormItem'
}
Copier après la connexion

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

<Form-item @on-form-change="test">
</Form-item>
Copier après la connexion

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;
Copier après la connexion

Obtenez le nom du composant parent :

var name = parent.$options.name;
Copier après la connexion

Démarrez le jugement de la boucle :

while (parent && (!name || name !== componentName)) {
    // ...
}
Copier après la connexion

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;
}
Copier après la connexion

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));
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!