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>

Kemudian tentukan fungsi dalam komponen anak, yang boleh dipanggil terus oleh komponen induk. Nilai pulangan fungsi ditakrifkan sebagai data yang kita perlukan.

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

Kemudian daftarkan komponen anak dengan komponen induk dan ikat ref, dan panggil fungsi komponen anak untuk mendapatkan data

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

Fungsi komponen induk memanggil

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

Pengesyoran berkaitan: "

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!