Communication des composants Vue : utilisation de la montre et calcul pour la surveillance des données

Communication des composants Vue : utilisez watch et calculé pour la surveillance des données

Vue.js est un framework JavaScript populaire, et son idée principale est la composantisation. Dans une application Vue, les données doivent être transférées et communiquées entre différents composants. Dans cet article, nous présenterons comment utiliser la montre et le calcul de Vue pour surveiller et répondre aux données.

watch
Dans Vue, watch est une option qui peut être utilisée pour écouter les modifications dans une ou plusieurs propriétés et effectuer les opérations correspondantes lorsque les propriétés changent. On peut utiliser watch dans les options du composant pour définir un ou plusieurs moniteurs. Voici un exemple d'utilisation de watch :

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="inputText" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始值',
      inputText: '',
    };
  },
  watch: {
    inputText(newValue) {
      this.message = newValue;
    },
  },
};
</script>

Dans le code ci-dessus, nous définissons un objet watch dans les options du composant et y définissons un moniteur. La fonction de rappel dans le moniteur sera appelée lorsque la propriété inputText change. Le paramètre reçu par la fonction de rappel est la nouvelle valeur de la propriété. Dans la fonction de rappel, nous attribuons la nouvelle valeur d'attribut à l'attribut message, afin que la valeur du message soit synchronisée avec inputText.

computed
computed est une option de Vue, qui peut être utilisée pour définir des propriétés calculées. Une propriété calculée est une valeur calculée en fonction de la valeur d'autres propriétés. Lorsque la propriété dépendante change, la propriété calculée est recalculée et renvoie une nouvelle valeur. Nous pouvons utiliser calculé dans les options du composant pour définir une ou plusieurs propriétés calculées. Voici un exemple d'utilisation de calculated :

<template>
  <div>
    <p>{{ message }}</p>
  <input v-model="inputText" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
    };
  },
  computed: {
    message() {
      return this.inputText;
    },
  },
};
</script>

Dans le code ci-dessus, nous avons défini un objet calculé dans les options du composant et y avons défini une propriété calculée. La valeur de retour de la propriété calculée sera utilisée comme valeur du message. Dans cet exemple, la valeur du message est synchronisée avec inputText et lorsque inputText change, le message est automatiquement mis à jour.

Résumé
L'utilisation de la montre et du calcul nous permet de surveiller et de répondre facilement aux données. Watch convient lorsque nous devons effectuer un traitement sur les attributs ou effectuer des effets secondaires, tandis que calculé convient lorsque nous devons calculer une nouvelle valeur basée sur les valeurs d'attribut existantes. Dans le développement réel, nous pouvons utiliser de manière flexible la surveillance et le calcul pour mettre en œuvre la communication de données entre les composants selon les besoins.

Ce qui précède est une introduction à l'utilisation de la montre et du calcul pour la surveillance des données. J'espère que cela vous sera utile pour comprendre la communication des composants Vue. Si vous souhaitez en savoir plus sur Vue, vous pouvez consulter la documentation officielle ou lire des livres connexes. Je vous souhaite d'écrire de meilleures applications Vue !

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!