Comment Vue transfère-t-il les données entre les composants ? Une brève analyse de la méthode Prop

Dans Vue, nous devons souvent transmettre des données entre différents composants. Ces composants peuvent être des composants parent-enfant, des frères et sœurs ou des composants de n'importe quel niveau. Vue propose diverses façons de résoudre ce problème, telles que Prop, Event Bus et Vuex. Cet article présentera l'une des méthodes de Vue pour transmettre des données entre composants - Prop.

Prop

Prop est un moyen permettant aux composants parents de transmettre des données aux composants enfants. Dans Vue, nous pouvons utiliser l'option Props pour définir les propriétés des sous-composants devant recevoir des données. Ces propriétés peuvent être de n'importe quel type JavaScript, tel que des chaînes, des nombres, des objets, des tableaux, etc. Dans le composant parent, nous pouvons utiliser la directive v-bind pour lier une expression JavaScript à l'attribut props du composant enfant.

Voyons un exemple pour comprendre comment transmettre des données à l'aide de Props. Supposons que nous ayons un composant parent Parent et un composant enfant Child. Parent doit transmettre un nom au composant Child. Nous pouvons définir le sous-composant de la manière suivante :

Vue.component('child', {
  // 声明 props
  props: ['name'],
  template: '<div>{{ name }}</div>'
})

Dans ce sous-composant, nous déclarons un attribut props appelé name, qui est utilisé pour recevoir les données du composant parent. Dans le modèle du composant enfant, nous pouvons afficher ces données via {{ name }}.

Ensuite, nous référençons ce composant enfant dans le composant parent et transmettons les données :

<child name="Tom"></child>

Dans cet exemple, nous utilisons la directive v-bind pour lier une expression JavaScript nommée Tom à l'attribut props du composant enfant supérieur. Le composant enfant recevra ces données et affichera Tom.

Bien sûr, nous pouvons également utiliser les données du composant parent pour transmettre la valeur. Par exemple :

<child :name="msg"></child>

Dans cet exemple, nous transmettons la valeur de l'attribut msg du composant parent à l'attribut name du composant enfant.

De plus, nous pouvons également utiliser la syntaxe abrégée de l'instruction v-bind pour transmettre des données :

<child :name="msg"></child>

Les deux points (:) ici sont équivalents à l'instruction v-bind.

Résumé

Dans Vue, nous pouvons utiliser Prop pour transmettre des données entre les composants. Ce processus nécessite de définir l'attribut props du sous-composant et d'utiliser la directive v-bind pour lier l'expression JavaScript à l'attribut props du sous-composant. De cette façon, les composants enfants peuvent recevoir et utiliser les données.

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!