Analyse d'exemples de transfert de valeur de composants dans les documents Vue

Dans le développement de Vue, la communication entre les composants est un élément très important. La transmission de données permet aux composants de mieux fonctionner ensemble et améliore la réutilisabilité et la composabilité du code entre les composants. Dans le processus de transfert de valeurs entre composants, en raison de la nature très flexible de Vue, il existe de nombreuses façons de transférer des données entre composants.

Cet article présentera les méthodes courantes de transfert de valeur de composant dans Vue et démontrera leur utilisation à travers un exemple.

1. Transfert de valeur d'attribut Props
   Dans Vue, les composants parents peuvent transmettre des données vers le bas aux composants enfants via des accessoires. Le composant enfant reçoit la valeur transmise par le composant parent en définissant l'option props. Les accessoires peuvent être n'importe quel type de valeur, y compris des types primitifs, des objets ou des tableaux.

Tout d'abord, on crée un composant parent, nommé parent.vue, le code est le suivant :

<template>
  <div>
    <h2>父组件</h2>
    <p>我是父组件的信息：{{parentInfo}}</p>
    <child :childInfo="parentInfo"></child>
  </div>
</template>

<script>
import Child from './child.vue'
export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      parentInfo: '我是来自父组件的信息'
    }
  }
}
</script>

Puis on crée un composant enfant, le contenu du composant enfant est :

<template>
  <div>
    <h2>子组件</h2>
    <p>我是子组件的信息: {{childInfo}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['childInfo']
}
</script>

Dans le composant parent, on passe le composant parent Les informations sont transmises à l'attribut childInfo du composant enfant pour transmettre les données. Dans le composant parent, j'utilise les données du composant parent pour restituer mes propres informations et les transmettre également au composant enfant.

Dans le composant enfant, nous utilisons l'option props pour recevoir les données du composant parent. Les composants enfants restituent leurs propres informations à l'aide de childInfo et la valeur childInfo provient du composant parent.

Dans le code ci-dessus, nous utilisons des accessoires pour transmettre des données et utilisons des accessoires dans les composants enfants pour recevoir des données. La communication entre les composants de cette manière permet le partage de données entre les composants, et l'état des données entre les composants peut être géré d'une manière unique.

2. Les méthodes $emit et $on transmettent des valeurs

Dans Vue, nous pouvons également utiliser la méthode submit et la méthode on pour la communication des composants. La méthode submit est utilisée pour envoyer des messages et la méthode on est utilisée pour recevoir des messages. Cette méthode est généralement utilisée entre des composants qui ne sont pas des relations parent-enfant.

Tout d'abord, nous créons une instance de vue, nommée event.vue, le code est le suivant :

<template>
  <div>
    <h2>组件间事件通信示例</h2>
    <child></child>
    <grand-child></grand-child>
  </div>
</template>

<script>
import Vue from 'vue'
import Child from './child.vue'
import GrandChild from './grandChild.vue'

export default {
  name: 'Event',
  components: {
    Child,
    GrandChild
  },
  created() {
    //使用$on监听来自子组件的事件
    this.$on('sendMsg', function(message) {
      console.log('父组件接收到来自子组件的消息：' + message)
    })
  }
}
</script>

Dans le composant parent, nous écoutons l'arrivée de l'événement via la méthode $on, et imprimons le message après avoir reçu le événement. L'utilisation spécifique est implémentée dans la fonction hook du cycle de déclaration créée.

Ensuite, regardons l'implémentation du code du composant enfant :

<template>
  <div>
    <h3>子组件</h3>
    <button @click="handleClick">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick() {
      //使用$emit发送事件
      this.$emit('sendMsg', '我是来自子组件的信息')
    }
  }
}
</script>

De cette façon, lorsque vous cliquez sur le bouton dans le composant enfant, la méthode $emit sera déclenchée et le nom de l'événement "sendMsg" sera utilisé pour envoyer le message "Je viens du composant enfant" au composant parent. Informations sur le composant", le composant parent peut écouter l'arrivée des événements via la méthode $on et effectuer les opérations correspondantes.

De même, nous pouvons également mettre en œuvre une communication entre deux composants qui ne sont pas dans une relation parent-enfant. Cette méthode rend les événements déclencheurs et les événements d'écoute des composants faiblement couplés. En utilisant les méthodes submit et on, une communication plus flexible entre les composants peut être obtenue.

En résumé, la communication entre les composants est également une partie très importante du développement de Vue. La maîtrise de diverses méthodes de transmission de valeurs constitue la base de l'écriture de composants. À travers des exemples de code spécifiques, cet article présente deux méthodes courantes de transmission de valeurs dans Vue : la transmission de valeurs props et la transmission de valeurs $emit/$on. Ces méthodes peuvent coordonner efficacement la communication entre les composants et améliorer la réutilisabilité et la composabilité du code.

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!