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.

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

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

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

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!