Quels sont les moyens de communiquer entre les composants Vue ?

Méthode : 1. Communiquer via l'ancêtre commun "$parent" ou "$root" ; 2. Le composant parent communique en définissant la référence du composant enfant ; 3. Le composant Brother déclenche un événement personnalisé via "$emit", "$ Le deuxième paramètre de émettre" est la valeur transmise et un autre composant frère écoute l'événement personnalisé via "$on".

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quels sont les moyens de communiquer entre les composants Vue

1. Le concept de communication entre les composants

Avant de commencer, divisons le mot communication entre les composants

Composants

Communication

Tout le monde sait que les composants are vue L'une des fonctions les plus puissantes, chaque .vue en vue peut être considérée comme un composant. La communication fait référence à l'expéditeur qui transmet des informations au destinataire via un certain média et un certain format pour atteindre un certain objectif. D'une manière générale, tout trafic d'informations est une communication

La communication inter-composants signifie que les composants (.vue) transmettent des informations d'une manière ou d'une autre pour atteindre un certain objectif

Par exemple

Nous utilisons le composant table dans le cadre de l'interface utilisateur, certaines données peut être transmis dans le composant de table, qui forme essentiellement la communication entre les composants

2. Ce qui est résolu par la communication entre les composantsDans les temps anciens, les gens transmettaient des lettres à travers des auberges et des pigeons volants, des balises d'alarme incendie, des symboles , le langage, les yeux, le toucher et d'autres méthodes de transmission d'informations. Aujourd'hui, avec le développement rapide de la science et de la technologie, la communication est essentiellement complétée par des téléphones filaires, des téléphones fixes, des téléphones sans fil, etc. tels que les téléphones mobiles, Internet et même les appels vidéo

D'après le paragraphe ci-dessus, nous pouvons voir que l'essence de la communication est la synchronisation et le partage d'informations

De retour en vue, chaque composant a sa propre portée, les données entre les composants ne peuvent pas être partagé

Mais dans le travail de développement réel, nous devons souvent laisser les composants partager des données, ce qui est également le but de la communication des composants

Laissez-les communiquer entre eux, afin de former un système organique complet

2. Classification de communication entre les composants La classification de la communication entre les composants peut être divisée comme suit

Communication entre les composants parents et enfants
Communication entre les composants frères et sœurs
Communication entre les composants petits-enfants et descendants
Communication entre composants non relationnels

3. Solutions de communication inter-composants Tri de 8 solutions de communication conventionnelles dans Vue

Passé par des accessoires
Événements personnalisés déclenchés via $émettre
utilisant ref
EventBus
parent ou root
attrs avec les auditeurs
Provide et Inject
Vuex

props pass data

Scénarios applicables : le composant parent transmet les données au composant enfant

Le composant enfant définit l'attribut props et définit les paramètres transmis par le composant parent à recevoir

Le composant parent utilise le littéral dans la balise du composant enfant pour transmettre la valeur

Children.vue

props:{
    // 字符串形式
 name:String // 接收的类型参数
    // 对象形式
    age:{  
        type:Number, // 接收的类型为数值
        defaule:18,  // 默认值为18
       require:true // age属性必须传递
    }
}

Composant Father.vue

70dd2a9f0fed2acde9148c7589b23bfc

$emit déclenche un événement personnalisé

Scénarios applicables : livraison du sous-composant Les données sont envoyées à le composant parent

Le composant enfant déclenche l'événement personnalisé via $emit. Le deuxième paramètre de $emit est la valeur transmise

Le composant parent lie l'écouteur pour obtenir les paramètres transmis par le composant enfant

Chilfen.vue

this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />

.

ref

Le composant parent définit ref lors de l'utilisation du composant enfant

Le composant parent obtient des données en définissant le composant enfant ref

Composant parent

<Children ref="foo" />
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

EventBus

Scénario d'utilisation : transmission de la valeur aux composants frères

Créez un EventBus du bus de temps central

Le composant frère déclenche l'événement personnalisé via $emit, et le deuxième paramètre de $emit est la valeur transmise

L'autre composant frère écoute l'événement personnalisé via $on

Bus. js

// 创建一个中央时间总线类
class Bus {
  constructor() {
    this.callbacks = {};   // 存放事件的名字
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)

Parent ou racine

Construire une association de communication à l'étranger via l'ancêtre commun $parent ou $root

Composant frère

this.$parent.on('add',this.add)

Un autre composant frère

this.$parent.emit('add')

attrs et auditeurs

Scénarios applicables : Les ancêtres passent données vers les descendants

Définir le lot Les attributs transmis $attrs et $listeners

contiennent des liaisons d'attributs (sauf classe et style) dans la portée parent qui ne sont pas reconnues (et obtenues) en tant qu'accessoires.

Vous pouvez passer v-bind="$attrs" pour transmettre des composants internes

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit(&#39;some-event&#39;, &#39;msg from grandson&#39;)">
{{msg}}
</div>

provide et inject

définir l'attribut provide dans le composant ancêtre et renvoyer la valeur transmise

Le composant descendant reçoit la valeur transmise par le composant via inject

Composant ancêtre

provide(){
    return {
        foo:'foo'
    }
}

Composant descendant

inject:['foo'] // Obtenez la valeur transmise par le composant ancêtre

vuex

Scénarios applicables : Transfert de données de composant avec des relations complexes

Vuex fonctionne comme un conteneur pour stocker les variables partagées

state est utilisé pour stocker les variables partagées

getter, vous pouvez ajouter un état dérivé getter (équivalent à un attribut calculé dans le magasin) pour obtenir les variables partagées La valeur

mutations est utilisé pour stocker les méthodes de modification de l'état.

les actions sont également utilisées pour stocker des méthodes de modification d'état, mais les actions sont basées sur des mutations. Couramment utilisé pour effectuer certaines opérations asynchrones

Résumé

Pour le transfert de données de composants de la relation parent-enfant, choisissez props et $emit pour le transfert, vous pouvez également choisir ref

Pour le transfert de données de composants de la relation fraternelle, vous Vous pouvez choisir $bus, et deuxièmement, vous pouvez choisir $parent pour le transfert

Le transfert de données des composants ancêtres et descendants peut choisir des attrs et des auditeurs ou Provide et Inject

Le transfert de données de composants de relations complexes peut stocker des variables partagées via vuex

[ Recommandations associées : "Tutoriel vue.js"]

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!