Tutoriel de base VUE3 : accessoires et calcul à l'aide du framework réactif Vue.js

Vue.js est un framework JavaScript populaire pour créer des applications Web avec des systèmes réactifs. Vue.js fournit un ensemble de directives et de composants faciles à utiliser pour simplifier le processus de développement. Dans cet article, nous apprendrons un concept important : les accessoires et le calcul.

Les props sont le moyen de transmettre des informations dans les composants Vue.js. Cela nous permet de transmettre des données du composant parent au composant enfant. Dans les composants enfants, nous pouvons utiliser les données transmises pour la liaison et le traitement.

Regardons un exemple :

Composant parent :

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

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

Composant enfant :

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

Dans le composant parent, nous lions une donnée nommée message à la propriété du composant enfant : message. Nous pouvons également définir des valeurs par défaut de somme de contrôle des données dans les composants enfants. Dans l'exemple ci-dessus, nous recevons des données du composant parent en définissant un accessoire appelé message dans le composant enfant.

Computed est une autre fonctionnalité puissante du système réactif Vue.js. Les propriétés calculées sont des propriétés calculées mises en cache en fonction de leurs dépendances réactives. Lorsque les dépendances changent, calculé recalculera les valeurs de leurs propriétés.

Prenons un exemple simple de propriétés calculées :

<template>
  <div>
    <input v-model="message">
    <p>计算过的信息：{{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComputedExample',
  data() {
    return {
      message: ''
    }
  },
  computed: {
    computedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

Dans cet exemple, nous définissons une zone de saisie de liaison bidirectionnelle, lions la valeur du message via v-model, puis nous définissons un attribut calculé calculatedMessage. Lorsque la valeur du message change, ComputedMessage sera recalculé. Dans notre calcul, il inverse les caractères du message et renvoie une nouvelle chaîne.

Résumé :

props et calculé sont les deux fonctionnalités principales du système réactif Vue.js. Utilisez des accessoires pour transmettre des données aux composants enfants et utilisez calculé pour définir des propriétés calculées réactives. Lorsque nous les utilisons de manière appropriée dans nos applications, nous pouvons mieux gérer et organiser notre code. Au fur et à mesure que nous continuons à apprendre Vue.js, nous rencontrerons d'autres fonctionnalités et directives système réactives, telles que les observateurs et v-bind.

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!