Comment transférer des valeurs entre composants dans vue3

Composant Vue3 transmettant la valeur (accessoires)

Composant parent transmettant la valeur au composant enfant

Dans le composant parent :

1 .Introduire ref

2 Définir les attributs et les valeurs d'attribut à transmettre

Dans le composant enfant :

props: { showDialogVisible: Boolean }, setup() { return { } }

Copier après la connexion

5. Enregistrez le composant

setup(props) { // 可以打印查看一下props传过来的属性以及属性的值 console.log(props); return { props } }

Copier après la connexion

6. . Utilisez cet attribut sur la page du composant enfant

Dans le composant enfant :# #

flux de données unidirectionnel

• 1. Définissez la valeur de la propriété (ou méthode) du composant parent que vous souhaitez modifier dans le composant enfant

  setup(props,context) { context.emit('setShow', false); return { } } //也可以：es6解构赋值取到emit //setup(props,{emit}) { // emit('setShow', false); // // return { // } //}

  Copier après la connexion
  context.emit( ‘Passer dans le composant parent Nom de l'attribut personnalisé’, valeur de l'attribut);

Dans le composant parent :

#. #

• Joindre la méthode de mon composant parent :

Le composant enfant transmet la valeur au composant parent (v-model)# #

transmise par le composant enfant

au composant enfant, vous peut effectuer directement des opérations bidirectionnelles sur cet attribut Binding.

# #

1. Modifiez directement les attributs obtenus à partir des accessoires#. #

• 2 .Liez le composant enfant dans la page parent

Transfert de valeur de composant Vue3 et traitement des événements

J'ai également recherché des informations sur Internet avant cet article et j'ai découvert qu'il y avait très peu d'informations, je vais donc les enregistrer moi-même# #
• L'exigence du projet est que chaque page doit ajouter une barre de navigation supérieure et un événement de retour

Écrivez d'abord le code du sous-composant, dans les composants Créez un fichier nav.vue dans le répertoire :

Contenu du fichier nav.vue du sous-composant

Composant parent fichier aboutus.vue : # #

N'est-ce pas très simple !

Ce qui suit présente le transfert de valeur du sous-composant

La même chose est faite avec le sous-composant nav.vue pour tester, entrez directement le code :

Regardons le parent La méthode d'écriture du composant aboutus.vue :

L'effet est le suivant :

# #

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!