Cara menghantar nilai daripada subkomponen vue kepada komponen induk

Kaedah untuk subkomponen Vue menghantar nilai kepada komponen induk: 1. Subkomponen secara aktif mencetuskan peristiwa untuk menghantar data kepada komponen induk. 2. Ikat ref kepada subkomponen dan tentukan fungsi yang komponen induk boleh panggil terus Komponen induk mendaftarkan subkomponen dan kemudian mengikat ref dan memanggil fungsi subkomponen untuk mendapatkan data.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1. Subkomponen secara aktif mencetuskan peristiwa dan menghantar data kepada komponen induk

1. komponen

Kod subkomponen

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

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

Fungsi untuk mencetuskan peristiwa dalam subkomponen

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

2, mengikat peristiwa pencetus dalam komponen induk

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

Komponen induk mencetuskan fungsi untuk memaparkan data yang diluluskan oleh komponen anak

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

Data yang dicetak oleh konsol

Dua, tiada lagi komponen kanak-kanak diperlukan Peristiwa pencetus (seperti klik butang, acara cipta(), dll.)

Kaedah ini lebih mudah,

1, ikat ref< dalam subkomponen 🎜>

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

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

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

console.log( this.$refs.authTree.getData());

tutorial vue.js"

Atas ialah kandungan terperinci Cara menghantar nilai daripada subkomponen vue kepada komponen induk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!