Communication des composants Vue : Comment communiquer entre les composants parents et enfants ?

Communication des composants Vue : Comment communiquer entre les composants parents et enfants ?

Vue est un framework JavaScript populaire qui fournit un moyen basé sur des composants pour créer des applications Web. Dans le développement réel, nous rencontrons souvent des situations où la communication entre les composants parent et enfant est requise. Cet article présentera certaines méthodes de communication de composants parent-enfant couramment utilisées dans Vue et fournira des exemples de code correspondants.

Props

Props est la méthode de communication la plus couramment utilisée entre les composants parent et enfant dans Vue. Il permet aux composants parents de transmettre des données aux composants enfants. Dans les composants enfants, les accessoires sont déclarés sous forme de tableau ou d'objet pour recevoir les données transmises par le composant parent.

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

Dans l'exemple ci-dessus, le composant parent transmet un accessoire nommé message au composant enfant. Le sous-composant déclare une propriété du même nom via le tableau props pour recevoir les données transmises. Dans le modèle du composant enfant, les données reçues peuvent être affichées via l'expression d'interpolation {{ message }}.

Emit

En plus de transmettre des données du composant parent au composant enfant, nous devons souvent également envoyer des données du composant enfant au composant parent ou déclencher un événement. Vue fournit un moyen pour les composants enfants de communiquer avec les composants parents via Emit.

<!-- 父组件 -->
<template>
  <div>
    <child-component @rating-updated="updateRating"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateRating(rating) {
      // 处理子组件发出的rating更新事件
      console.log('Rating updated:', rating);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    ...
    <button @click="updateRating">Update Rating</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateRating() {
      const rating = 5; // 子组件的评分数据
      this.$emit('rating-updated', rating);
    }
  }
};
</script>

Dans l'exemple ci-dessus, l'événement de clic sur le bouton dans le composant enfant déclenche la méthode updateRating et envoie une valeur personnalisée nommée rating-updated au composant parent via cet événement.$emit('rating-updated', rating), et a réussi la notation des données de notation. Utilisez @rating-updated="updateRating" dans le composant parent pour écouter l'événement de mise à jour de notation émis par le composant enfant et gérer l'événement dans la méthode updateRating.

$refs

Parfois, nous devons accéder aux propriétés ou aux méthodes des composants enfants directement à partir du composant parent. Vue fournit l'attribut $refs pour implémenter cette méthode d'accès direct.

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called.');
    }
  }
};
</script>

Dans l'exemple ci-dessus, l'événement de clic sur le bouton dans le composant parent appelle la méthode callChildMethod. À l'intérieur de la méthode, this.$refs.childComponent est utilisé pour accéder au composant enfant et appeler la méthode childMethod du composant enfant.

Provide/Inject

Provide/Inject est une méthode de communication de composants avancée qui permet aux composants ancêtres de fournir des données à tous les composants descendants sans les transmettre explicitement couche par couche. Cette méthode de communication convient à la communication entre les composants de plusieurs niveaux.

<!-- 祖先组件 -->
<template>
  <div>
    ...
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent
  }
};
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

Dans l'exemple ci-dessus, le composant ancêtre fournit des données nommées message au composant descendant via la méthode provide. Le composant petit-fils injecte ces données via inject: ['message'] et les affiche en utilisant {{ message }} dans le modèle.

Ce qui précède présente les méthodes de communication des composants parent-enfant couramment utilisées dans Vue. Chaque méthode a ses scénarios applicables. Dans le développement réel, des méthodes de communication appropriées peuvent être sélectionnées en fonction de besoins spécifiques. J'espère que cet article vous aidera à comprendre la communication entre les composants Vue !

Lien de référence :

• [Vue Document - Component Communication](https://cn.vuejs.org/v2/guide/components.html#%E7%88%B6%E5%AD%90%E7%BB %84%E4%BB%B6%E9%80%9A%E4%BF%A1)

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!