Démarrage rapide VUE3 : utilisez des accessoires pour transmettre des données aux sous-composants

VUE3 est la dernière version de Vue.js, qui a été considérablement améliorée en termes de performances, d'expérience et de flexibilité. Dans cet article, nous apprendrons comment utiliser les accessoires de VUE3 pour transmettre des données aux composants enfants.

Vue.js est un framework MVVM (Model-View-ViewModel), basé sur des composants. Chaque composant a un état local et des actions possibles, la communication entre les composants est donc cruciale. Dans Vue.js, les composants parents peuvent transmettre des données aux composants enfants via des accessoires, et les composants enfants reçoivent des données en écoutant ces accessoires transmis.

Avant d'utiliser Props pour transmettre des données aux sous-composants, nous devons d'abord comprendre la syntaxe des composants de VUE3. Dans VUE3, un composant peut définir son comportement via la fonction setup(). La fonction setup() renvoie un objet qui contient l'état et le comportement du composant.

Jetons un coup d'œil au code ci-dessous, qui est un simple composant parent qui transmet une simple chaîne au composant enfant qu'il contient :

<template>
  <div>
    <child-component message="Hello World!"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

Dans le code ci-dessus, nous avons une référence à ChildComponent.vue, c'est notre sous-composant. Dans la balise modèle du composant parent, nous transmettons une chaîne nommée message au composant enfant. Nous verrons bientôt cette propriété dans le composant enfant.

Ensuite, jetons un œil au code de ChildComponent.vue :

<template>
  <div>{{ childMessage }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const childMessage = props.message

    return {
      childMessage
    }
  }
}
</script>

Dans le code ci-dessus, nous voyons l'objet props. Les accessoires constituent un moyen pratique de transmettre des données des composants parents aux composants enfants. Dans notre composant enfant, nous définissons une propriété appelée message, qui doit être une chaîne. Nous forçons également le composant parent à transmettre cet attribut via l'option requise.

Dans la fonction de configuration, nous passons un paramètre appelé props, qui contient tous les accessoires. Nous attribuons l'attribut message dans les accessoires à la variable childMessage, puis nous renvoyons un objet contenant childMessage, qui fait partie de l'état de notre composant enfant.

Enfin, dans notre modèle, nous lions la variable childMessage via une syntaxe à double accolade.

Il s'agit de l'ensemble du processus d'utilisation de Props pour transmettre des données aux composants enfants. Bien sûr, dans les applications réelles, il peut exister des méthodes de transfert de données et de rendu plus complexes, mais l'exemple ci-dessus suffit à illustrer l'utilisation et la syntaxe de base de Props.

Résumé

L'utilisation des fonctions Props et setup() de VUE3 pour transmettre des données aux sous-composants est très simple et flexible. Grâce à Props, vous pouvez transmettre des chaînes simples, des nombres, des valeurs booléennes, etc., ainsi que des objets et des tableaux complexes. Cela rend la communication entre les composants facile et naturelle, rationalisant ainsi le flux de travail.

J'espère que cet article vous sera utile et vous permettra de mieux comprendre la syntaxe et l'utilisation des composants VUE3.

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!