Comment utiliser les données à l'intérieur du composant et les accessoires des paramètres du composant pour réaliser le transfert de données dans Vue

Vue est un framework de développement front-end très populaire, dans lequel les composants sont des éléments de base très importants. Dans Vue, les données à l'intérieur du composant et les accessoires des paramètres du composant peuvent être utilisés ensemble pour réaliser le transfert de données.

Dans les composants Vue, les données sont les données d'état à l'intérieur du composant. Il est accessible et modifié par toutes les méthodes du composant. Pour utiliser des données à l'intérieur d'un composant, vous pouvez les déclarer de la manière suivante :

  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }

Dans cet exemple, nous déclarons une donnée appelée message. Ces données sont accessibles et modifiables dans toutes les méthodes à l'intérieur du composant.

Mais que se passe-t-il si nous voulons partager des données entre composants ? À l'heure actuelle, nous pouvons utiliser les accessoires de paramètres de composants pour transmettre des données. Les accessoires nous permettent de transmettre des données entre les composants.

Voici un exemple qui montre comment utiliser des accessoires pour transmettre des données dans un composant :

  // 父组件
  <template>
    <div>
      <child-component message="Hello Vue!"></child-component>
    </div>
  </template>

  // 子组件
  <template>
    <div>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: ['message']
  }
  </script>

Dans cet exemple, le composant parent transmet un accessoire nommé message avec la valeur "Bonjour Vue !" au composant enfant. Dans le modèle du composant enfant, nous utilisons {{message}} pour afficher la valeur de ces accessoires.

Mais que se passe-t-il si nous voulons modifier la valeur de ces accessoires dans le composant enfant ? À l'heure actuelle, nous pouvons utiliser le modificateur .sync dans Vue pour transmettre des accessoires et implémenter une liaison bidirectionnelle :

  // 父组件
  <template>
    <div>
      <child-component :message.sync="message"></child-component>
    </div>
  </template>

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

  // 子组件
  <template>
    <div>
      <input v-model="message">
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: ['message', 'update:message']
  }
  </script>

Dans cet exemple, nous passons un accessoire nommé message dans le composant parent et utilisons le modificateur .sync pour y parvenir. Deux liaison à sens unique. Dans le composant enfant, nous utilisons v-model pour lier le message à une entrée et modifier sa valeur à l'intérieur du composant.

Cependant, il convient de noter que si vous souhaitez modifier la valeur des props dans un composant enfant, vous devez également définir un événement de composant parent de update:propName et utiliser $emit pour déclencher cet événement dans le composant enfant. Dans cet exemple, nous définissons un événement nommé update:message et utilisons $emit dans le composant enfant pour mettre à jour la valeur du message dans le composant parent.

En résumé, grâce aux données à l'intérieur du composant et aux accessoires des paramètres du composant, nous pouvons facilement implémenter le transfert de données entre les composants dans Vue. Si vous l'utilisez correctement, la transmission de données entre composants sera très simple et votre code sera plus facile à maintenir.

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!