Comment transmettre la valeur du sous-composant vue au composant parent

Méthodes permettant aux sous-composants vue de transmettre des valeurs aux composants parents : 1. Le sous-composant déclenche activement des événements pour transmettre des données au composant parent. 2. Liez la référence au sous-composant et définissez une fonction que le composant parent peut appeler directement. Le composant parent enregistre le sous-composant, puis lie la référence et appelle la fonction du sous-composant pour obtenir des données.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Tout d'abord, le sous-composant déclenche activement l'événement et transmet les données au composant parent

1 Liez un événement et la fonction déclenchée par l'événement sur le sous-composant

Code du sous-composant

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>

<Button type="success" @click="submit"></Button>
</div>
  
</template>

. L'événement est déclenché dans la fonction du sous-composant

      submit(){
        this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
      },

2, lie l'événement déclencheur dans le composant parent

<AuthTree  @getTreeData=&#39;testData&#39;>
</AuthTree>

La fonction de déclenchement du composant parent affiche les données transmises par le composant enfant

testData(data){
      console.log("parent");
      console.log(data)
    },

Les données imprimées par la console

Deuxièmement, il n'est pas nécessaire de le déclencher dans les événements du composant enfant (tels que les clics sur des boutons, les événements create(), etc.)

Cette méthode est beaucoup plus simple,

1.

dans le sous-composant puis définissez une fonction dans le sous-composant. Cette fonction est Le composant parent peut être appelé directement. La valeur de retour de la fonction est définie comme les données dont nous avons besoin.

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
</div>
  
</template>

Ensuite, enregistrez le composant enfant avec le composant parent et liez la référence, et appelez la fonction du composant enfant pour obtenir les données

getData(){
        return this.$refs.treeData.getCheckedNodes()
    },

L'appel de fonction du composant parent

<AuthTree ref="authTree">
          </AuthTree>

Recommandations associées : "

Tutoriel vue.js "

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!