Attributs props de Vue3

Vue3 选项式 APIVue3 API des options

propsest un moyen de transmettre des données entre les composants.

Dans Vue.js, un composant parent peutpropstransmettre des données aux composants enfants. Une fois que le composant enfant reçoit ces données, il peut effectuer le rendu ou d'autres opérations en fonction des données.

Analogie

Vous pouvezpropsimaginez-le comme un facteur. Le composant parent est l'expéditeur, le composant enfant est le destinataire. Le composant parent transmet les données (une lettre) viaprops(le facteur) au composant enfant. Après avoir reçu les données, le composant enfant peut les traiter en fonction du contenu.

Comment utiliser les props ?

Dans Vue.js, l'utilisationpropsest très simple. Ci-dessous, nous utilisons un exemple pour illustrer comment utiliserprops。

Exemple : passer et recevoir des props

Supposons que nous ayons un composant parentParentComponentet un composant enfantChildComponent. Nous voulons que le composant parent transmette un message au composant enfant.

1. Composant parent (ParentComponent.vue)

Exemple

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Bonjour du parent !'
    };
  }
};
</script>

2. Composant enfant (ChildComponent.vue)

Exemple

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Explication

  1. Composant parent: Dans le composant parent, nous:message="parentMessage"vaparentMessagetransmettons les données au composant enfant.parentMessageest une variable définie dans le composant parent, et sa valeur est'Hello from Parent!'。

  2. Composant enfant: Dans le composant enfant, nous utilisonspropspour recevoir les données transmises par le composant parent.messageest défini dans le composant enfantprops, et son type estString, et il est défini àrequired: true, indiquant que cecipropsest requis.

  3. Rendu: Après que le composant enfant reçoitmessage, il le rend dans le template, en l'affichant comme<p>Hello from Parent!</p>。

Types et validation des props

Dans Vue.js, vous pouvezpropsspécifier des types et des règles de validation pour garantir que les données transmises correspondent aux attentes.

Exemple : Types et validation

Exemple

props: {
  message: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  },
  hobbies: {
    type: Array,
    validator: function (value) {
      return value.length > 0;
    }
  }
}

Explication

  1. **type**: spécifierpropsle type de données. Il peut êtreString、Number、Boolean、Array、Objectetc.

  2. **required**: spécifierpropssi elle est requise. Si défini àtrue, le composant parent doit la passerprops, sinon un avertissement sera lancé.

  3. **default**: pourpropsdéfinir une valeur par défaut. Si le composant parent ne la passe pasprops, le composant enfant utilisera la valeur par défaut.

  4. **validator**: fonction de validation personnalisée, utilisée pour validerpropssi la valeur remplit des conditions spécifiques.

Notes

  1. Flux de données unidirectionnel: Dans Vue.js,propsest unidirectionnel, ce qui signifie que les données ne peuvent circuler que du composant parent vers le composant enfant. Un composant enfant ne doit pas modifier directementpropsla valeur. Si vous devez la modifier, vous pouvez informer le composant parent pour qu'il effectue la modification en déclenchant un événement.

  2. Conventions de nommage：propsIl est recommandé d'utiliser camelCase pour le nommage, par exempleuserName. Lors du passageprops, il est recommandé d'utiliser le délimiteur kebab-case, par exempleuser-name。

  3. Props dynamiques: peuvent être réalisées viav-bindou:liaison dynamiqueprops, par exemple:message="parentMessage"。

Vue3 选项式 APIVue3 API des options

Autres extensions