À propos des problèmes de communication dans les composants Vue.js

Écrit devant

Parce que je suis très intéressé par Vue.js et que la pile technologique sur laquelle je travaille habituellement est Vue.js, j'ai passé du temps à étudier le code source de Vue.js dans le passé quelques mois, et le résumé et la sortie ont été réalisés.

Que sont les composants Vue ?

Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également prendre la forme d'éléments HTML natifs, étendus avec l'attribut is.

Communication entre les composants Vue

Le composant parent communique avec le composant enfant

Méthode 1 : accessoires

À l'aide des accessoires, le composant parent peut utiliser des accessoires pour transmettre des données aux composants enfants.

Modèle de vue du composant parent père.vue

<template>
    <child :msg="message"></child>
</template>

<script>

import child from &#39;./child.vue&#39;;

export default {
    components: {
        child
    },
    data () {
        return {
            message: &#39;father message&#39;;
        }
    }
}
</script>

Modèle de vue du composant enfant child.vue

<template>
    <p>{{msg}}</p>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

Méthode 2 utiliser $children

utiliser $children peut accéder aux composants enfants du composant parent.

Le composant enfant communique avec le composant parent

Méthode 1 : Utiliser les événements vue

Le composant parent transmet la méthode événement au composant enfant, et l'enfant Le composant déclenche l'événement via $emit Rappel au composant parent.

Modèle de vue de composant parent père.vue

<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from &#39;./child.vue&#39;;

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

Modèle de vue de composant enfant enfant.vue

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit(&#39;msgFunc&#39;);
        }
    }
}
</script>

Méthode 2 : Modifier en modifiant les accessoires passés par le parent composant Données du composant parent

Cette méthode ne peut être utilisée que lorsque le composant parent transmet une variable de référence ne peut pas obtenir l'effet correspondant. Parce que la variable potable pointe finalement vers la même adresse mémoire, qu'il s'agisse des données du composant parent ou des données des accessoires obtenues par le composant enfant, donc modifier les données des accessoires du composant enfant modifie les données du composant parent. composant.

Cependant, il n'est pas recommandé de faire cela. Il n'est pas recommandé de modifier directement la valeur des accessoires si les données sont utilisées pour afficher les modifications, dans le développement réel, je les mets souvent dans les données et les renvoie. si nécessaire. Le composant parent utilise ensuite des événements pour renvoyer des données. Cela maintient les composants indépendants et découplés et ne provoque pas de confusion anormale du flux de données en raison de l'utilisation des mêmes données. Les données sont uniquement transmises via des interfaces spécifiques pour modifier les données, et l'état des données internes est géré par des données spécialisées.

Méthode 3 : Utilisez $parent

Utilisez $parent pour accéder aux données du composant parent.

Transfert de données entre composants non parent-enfant et composants frères

Pour la communication de composants non parent-enfant, Vue recommande officiellement d'utiliser une instance Vue comme bus d'événements central.

Vue dispose d'un mécanisme d'événement interne, vous pouvez vous référer au code source.

La méthode $on est utilisée pour écouter un événement.

$emit est utilisé pour déclencher un événement.

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');

Communication entre composants parent-enfant à plusieurs niveaux :

Dans Vue1.0, deux méthodes, $broadcast et $dispatch, sont implémentées pour diffuser (ou distribuer) aux composants enfants ( ou composants parents) ), lorsque le composant enfant (ou composant parent) écoute l'événement et renvoie vrai, l'événement continuera à être diffusé (ou distribué) au composant de niveau petit-enfant. Mais cette méthode a été supprimée dans Vue2.0.

Lorsque j'étudiais l'élément de bibliothèque de composants open source d'Ele.me, j'ai découvert qu'ils avaient réimplémenté les méthodes de diffusion et de répartition et les avaient introduites sous forme de mixins. Pour plus de détails, veuillez vous référer à "Parler de". diffusion et répartition de la bibliothèque de composants d'éléments". Mais c'est légèrement différent des deux implémentations de méthodes de Vue1.0. Ces deux méthodes implémentent les fonctions de diffusion d'événements vers les composants descendants et de répartition d'événements vers les composants parents multi-niveaux. Mais il ne s'agit pas d'un événement diffusé au sens large. Il doit spécifier un nom de commentaire pour diffuser (distribuer) les événements au composant portant le nom de composant spécifié.

En fait, l'implémentation interne de ces deux méthodes utilise toujours $parent et $children, qui sont utilisés pour parcourir les nœuds enfants ou interroger les nœuds parents étape par étape. Lors de l'accès au nom du composant spécifié, $emit est. appelé pour déclencher l'événement Specify.

Gestion complexe des données d'application sur une seule page

Lorsque l'application est suffisamment complexe, veuillez utiliser vuex pour la gestion des données.

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!