[vue log] Explication d'exemples de communication entre les composants parents et enfants (props, $ ref, $ emit)

Préface

Le composant est l' vue.jsune des fonctionnalités les plus puissantes et les instances de composant d'étendue sont indépendantes les unes des autres, ce qui signifie qu'entre les différents composants des données ne peuvent pas se référencer. Alors comment communiquer entre les composants est devenu la connaissance clé en vue. Cet article passera props, $refet $emitces connaissances pointent pour expliquer comment mettre en œuvre les composantes de la communication entre père et fils.

1. Exemple

Deux composants father.vueet child.vuecomme base de l'exemple.

//父组件
<template>
 <div>
 <h1>我是父组件！</h1>
 <child></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
    
 components: {
    
    Child},
}
</script>

//子组件
<template>
 <h3>我是子组件！</h3>
</template>

<script>
</script>

Les codes de ces deux parties sont très clairs. Le composant parent importimporte le composant enfant via la méthode et l' componentsenregistre dans les propriétés, puis le composant enfant peut être <child>incorporé dans le composant parent sous la forme d' une étiquette . father.vueL'effet après l' exécution est comme ceci:

Deuxièmement, réalisez la communication à travers des accessoires

Les propsoptions du composant enfant peuvent recevoir des données du composant parent. C'est vrai, il ne peut être reçu, c'est propsune liaison unidirectionnelle, c'est-à-dire que seul le composant parent peut être passé au composant enfant, et non l'inverse. Il existe également deux modes de livraison:

2.1 Transfert statique

Le composant enfant propsdéclare un attribut personnalisé via des options, puis le composant parent peut transmettre des données au composant enfant via cet attribut lors de l'imbrication de balises.

 <!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
    
 components: {
    
    Child},
}
</script>

<!-- 子组件 -->
<template>
  <h3>{
    
    {
    
    message}}</h3>
</template>
<script>
 export default {
    
    
 props: ['message'] //声明一个自定义的属性
 }
</script>

2.1 Livraison dynamique

Nous savons déjà que nous pouvons donner comme ci-dessus propsune valeur statique, mais le plus souvent, nous avons besoin de données dynamiques. À ce stade, vous pouvez utiliser v-bindpour réaliser. Grâce aux propriétés personnalisées v-bindliées props, le passé n'est pas une chaîne statique, il peut s'agir d'une expression, d'une valeur booléenne, d'un objet, etc. tout type de valeur.

<!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child message="我是子组件一！"></child>

 <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
 <child v-bind:message="a+b"></child>

 <!-- 用一个变量进行动态赋值。-->
 <child v-bind:message="msg"></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
    
 components: {
    
    Child},
 data() {
    
    
 return {
    
    
  a:'我是子组件二！',
  b:112233,
  msg: '我是子组件三！'+ Math.random()
 }
 }
}
</script>

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

Le résultat est le suivant:

Troisièmement, réalisez la communication via $ ref

L' refexplication officielle est la suivante: refelle est utilisée pour enregistrer des informations de référence pour des éléments ou sous-composants. Les informations de référence seront enregistrées dans le composant parent de $refsl'objet.
Je ne comprends pas, non? C'est normal et je ne peux pas le comprendre non plus. Comment doit-il être compris? Consultez mon explication:

• S'il est refutilisé sur un sous-composant, il pointe vers une instance de composant, qui peut être comprise comme un index du sous-composant, et il est $refpossible d'obtenir les attributs et méthodes définis dans le sous-composant.
• S'il est utilisé refsur un élément DOM normal, la référence pointe vers l'élément DOM. Grâce à la $refpossibilité d'obtenir l'ensemble d'attributs du DOM, vous pouvez facilement accéder à l'élément DOM, qui est similaire au sélecteur JQ.

Comment $refparvenir à la communication? Ci-dessous, propj'utiliserai les fonctions implémentées ci-dessus pour y $refparvenir à nouveau:

<!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child ref="msg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
    
    
 components: {
    
    Child},
 mounted: function () {
    
    
  console.log( this.$refs.msg);
  this.$refs.msg.getMessage('我是子组件一！')
 }
 }
</script>

<!-- 子组件 -->
<template>
  <h3>{
    
    {
    
    message}}</h3>
</template>
<script>
 export default {
    
    
 data(){
    
    
  return{
    
    
  message:''
  }
 },
 methods:{
    
    
  getMessage(m){
    
    
  this.message=m;
  }
 }
 }
</script>

À partir du code ci-dessus, nous pouvons trouver que ref=‘msg'l'instance de l'enfant du composant enfant peut être pointée $refet que les paramètres peuvent être passés au composant enfant en msg.getMessage（）appelant la getMessageméthode du composant enfant. Ce qui suit est un “ console.log( this.$refs.msg);”contenu imprimé, qui peut vous donner une meilleure compréhension, par ce que refnous obtenons quoi:

l'effet final est le suivant:

voici pour ajouter un peu, propet $refla différence entre:

• propConcentrez-vous sur le transfert de données, il ne peut pas appeler de propriétés et de méthodes dans les sous-composants. Utilisez des scénarios tels que la personnalisation du titre et du contenu lors de la création des composants d'article qui conviennent le mieux prop.
• $refSe concentrer sur l'index, principalement utilisé pour appeler les propriétés et les méthodes dans les sous-composants, en fait, n'est pas bon pour le transfert de données. Et lorsqu'il est refutilisé dans l'élément dom, il peut être utilisé comme sélecteur, ce qui est plus utile que comme index.

Quatrièmement, réalisez la communication via $ emit

Dans les deux exemples ci-dessus, le composant parent communique avec le composant enfant et le composant enfant communique $emitavec le composant parent en implémentant la communication.
L' $emitexplication sur le site officiel est également très floue. Selon ma propre compréhension, c'est la suivante:

vm.$emit( event, arg )

$emitLier un événement personnalisé event. Lorsque cette instruction est exécutée, le paramètre est argtransmis au composant parent, et le composant parent @eventécoute et reçoit les paramètres.

<template>
 <div>
 <h1>{
    
    {
    
    title}}</h1>
 <child @getMessage="showMsg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
    
    
 components: {
    
    Child},
 data(){
    
    
  return{
    
    
  title:''
  }
 },
 methods:{
    
    
  showMsg(title){
    
    
  this.title=title;
  }
 }
 }
</script>

<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
    
    
 mounted: function () {
    
    
  this.$emit('getMessage', '我是父组件！')
 }
 }
</script>