Communication des composants Vue : utilisez la directive v-bind pour la communication de liaison de propriété

Communication des composants Vue : utilisez la directive v-bind pour la communication de liaison de propriétés

Dans Vue, les composants jouent un rôle important dans la création d'applications Web. Et la communication entre les composants est un sujet très important. Vue fournit une variété de façons d'implémenter la communication entre les composants, l'une des méthodes importantes consiste à utiliser la directive v-bind pour la communication de liaison de propriété.

La directive v-bind nous permet de transmettre les données du composant parent au composant enfant et de recevoir ces données dans le composant enfant via l'attribut props. De cette manière, les données peuvent être transférées et partagées entre les composants parents et les composants enfants.

Supposons que nous ayons un composant parent App et un composant enfant Child, et que nous souhaitions définir une propriété dans le composant parent et la transmettre au composant enfant.

Tout d'abord, définissez un message d'attribut de données dans le composant parent App :

<template>
  <div>
    <h1>父组件</h1>
    <input type="text" v-model="message">
    <child-component :text="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

Dans le composant enfant Child, nous pouvons recevoir les attributs transmis via l'attribut props et les afficher dans le modèle :

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    text: {
      type: String,
      required: true
    }
  }
};
</script>

Dans le code ci-dessus, nous transmettez l'attribut message du composant parent à l'attribut texte du composant enfant via la directive v-bind. Le sous-composant définit les types d'attributs reçus et les exigences requises via l'attribut props. Ensuite, dans le modèle du sous-composant, nous pouvons utiliser {{ text }} pour afficher la valeur de l'attribut reçue.

Lorsque nous saisissons des informations dans le composant parent, le composant enfant mettra à jour l'affichage en temps réel. En effet, les données du composant parent changent et la directive v-bind déclenche un nouveau rendu du composant enfant et lui transmet les dernières valeurs de propriété.

En plus de la liaison de propriété unidirectionnelle, nous pouvons également utiliser la directive v-bind pour la liaison bidirectionnelle. Cela permet aux composants enfants de modifier les valeurs des propriétés dans le composant parent. Dans le composant enfant, nous pouvons utiliser la directive v-model pour lier des données locales et déclencher un événement personnalisé via la méthode $emit pour informer le composant parent des modifications des valeurs de propriété.

Voici un exemple avec une liaison bidirectionnelle :

<template>
  <div>
    <h1>父组件</h1>
    <input type="text" v-model="message">
    <child-component v-bind:text="message" @input="message = $event"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

<template>
  <div>
    <h2>子组件</h2>
    <input type="text" v-model="text" @input="$emit('input', text)">
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      text: this.text
    };
  }
};
</script>

Dans le code ci-dessus, l'attribut message dans le composant parent est transmis au composant enfant via la directive v-bind. Dans le sous-composant, l'attribut reçu est lié à un attribut de texte local via la directive v-model, et une liaison bidirectionnelle est effectuée dans la zone de saisie. Lorsque la valeur de la zone de saisie change, le composant enfant déclenche l'événement d'entrée via la méthode $emit et transmet la valeur actuelle de l'attribut de texte au composant parent en tant que paramètre. Le composant parent écoute l'événement personnalisé via @input et met à jour la valeur de l'attribut message dans le gestionnaire d'événements.

La communication de liaison de propriété via la directive v-bind nous permet de partager facilement des données entre les composants Vue. Il s'agit d'une méthode de communication de composants très importante et couramment utilisée dans Vue. Dans le développement réel, nous pouvons choisir des méthodes de communication appropriées pour réaliser l'interaction et le partage de données entre les composants en fonction de besoins et de scénarios spécifiques.

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!