Comment communiquer entre les composants parents et enfants de Vue ? Quatre méthodes de communication entre les composants parents et enfants de Vue

Le contenu de cet article explique comment communiquer entre les composants parents et enfants de Vue ? Les quatre méthodes de communication entre les composants parent et enfant de Vue ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Il existe actuellement quatre modes de communication parent-enfant :

1. Le composant parent transmet les données aux composants enfants
Comment les données du composant parent sont-elles transmises aux composants enfants ? Ceci peut être réalisé grâce à l'attribut props
Composant parent :

<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}

Le composant enfant reçoit des données via des accessoires :
Méthode 1 :

props: ['childMsg']

Méthode 2 :

props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}

De cette manière, le composant parent peut transmettre des données au composant enfant

2. Ensuite, si le composant enfant Et si le composant souhaite modifier les données ? Cela n'est pas autorisé dans Vue, car Vue autorise uniquement le transfert de données unidirectionnel. À ce stade, nous pouvons déclencher un événement personnalisé pour informer le composant parent de modifier les données, atteignant ainsi l'objectif de modification des données du composant enfant <🎜. >
Utiliser v-on lie des événements personnalisés

Chaque instance de Vue implémente l'interface Événements, c'est-à-dire :

Utilisez $on(eventName) pour écouter les événements
Utilisez $emit(eventName) pour déclencher des événements

Le composant parent peut utiliser directement v-on où le composant enfant est utilisé pour écouter les événements déclenchés par le composant enfant.

Composant enfant :

Composant parent :

<template> <div 
@click="up"></div></template>methods: { up() { 
this.$emit(&#39;resultChange&#39;,&#39;hehe&#39;); //主动触发resultChange方法，&#39;hehe&#39;为向父组件传递的数据
 }}

Événement déclencheur Utiliser le format de casse chameau pour le nom de l'événement personnalisé dans le parent composant Vous pouvez utiliser le formulaire on-evnet-name pour surveiller.

<div> <child @on-result-change="mychangHandle" 
:msg="msg"></child> 
//监听子组件触发的upup事件,然后调用change方法</div>methods: { mychangHandle(msg) {
 this.msg = msg; }}

3. Communication entre tous les composants
Si les deux composants ne sont pas des composants parent-enfant, comment communiquent-ils ? À l'heure actuelle, la communication peut être réalisée via eventHub.
Le soi-disant eventHub consiste à créer un centre d'événements, qui équivaut à une station de transfert, et peut être utilisé pour diffuser et recevoir des événements. Instance Vue vide comme bus d'événements central :


Le composant 1 se déclenche :

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

Le composant 2 reçoit :

<div @click="eve"></div>methods: { eve() { Hub.$emit(&#39;change&#39;,&#39;hehe&#39;); //Hub触发事件 }}

4. $refs

<div></div>created() { Hub.$on(&#39;change&#39;, () => { //Hub接收事件 this.msg = &#39;hehe&#39;; });}

Malgré les accessoires et les événements, vous devez parfois toujours accéder aux composants enfants directement en JavaScript. Vous pouvez le faire en utilisant ref pour spécifier un ID d'index pour le composant enfant.

Lorsque ref est utilisé avec v-for, ref est un tableau ou un objet contenant les sous-composants correspondants.

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: &#39;#parent&#39; })
// 访问子组件
var child = parent.$refs.profile

Recommandations associées :

Comment implémenter la communication entre les composants vue parent et enfant

Communication entre vue child composants et composants parents Explication détaillée

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!