Discuter des méthodes d'attribution d'attributs aux sous-composants de Vue

Vue est un framework JavaScript populaire qui permet de créer rapidement et facilement des composants réutilisables dans des applications Web. Il implémente l'extension des composants via un modèle de programmation réactif et une syntaxe de modèle. Cet article vise à explorer la méthode d'attribution de propriétés aux sous-composants Vue.

Sous-composants Vue

Une application Vue se compose d'un ou plusieurs composants. Les composants Vue suivent une structure hiérarchique, commençant par un composant racine, puis se décomposant en composants plus petits, formant une structure de composants hiérarchique. Dans Vue, le transfert de données entre les composants s'effectue via la communication entre les composants parent-enfant.

Un composant enfant est un composant appelé par un composant parent. Les composants parents peuvent configurer les composants enfants en leur transmettant des propriétés.

Affectation d'attributs de sous-composants Vue

Vue fournit un moyen pratique de transmettre des données aux sous-composants via la transmission d'attributs. Les composants parents peuvent transmettre des données aux composants enfants via des accessoires. Les composants enfants peuvent obtenir des données des composants parents en déclarant les accessoires qu'ils souhaitent accepter.

Par exemple :

Dans le composant parent App.vue :

<template>
  <div>
    <Child :name="name" :age="age" />
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    Child
  },
  data() {
    return {
      name: 'Tom',
      age: 22
    }
  }
}
</script>

Dans le composant enfant Child.vue :

<template>
  <div>
    <p>My Name is {{ name }}</p>
    <p>My age is {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    name: String,
    age: Number
  }
}
</script>

Dans le code ci-dessus, nous pouvons voir que le composant enfant Child définit deux attributs nom et âge via des accessoires , Cette définition de propriété permet à la propriété de transmettre des données du composant parent au composant enfant. Le composant parent App.vue transmet les données au composant enfant Child.vue via une liaison de propriété, ce qui peut être effectué des manières suivantes :

<Child :name="name" :age="age" />

À ce stade, le composant enfant Child.vue pourra obtenir le nom de la propriété et propriétés à partir des données d'âge du composant parent App.vue.

Conclusion

Dans Vue, le composant parent peut transmettre des données au composant enfant via le passage d'attributs, et le composant enfant peut obtenir les données du composant parent en déclarant les attributs à accepter. Cet article présente principalement la méthode d'attribution de propriétés aux sous-composants Vue. J'espère que l'introduction de cet article vous aidera à mieux utiliser 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!