Cara menghantar nilai daripada subkomponen vue kepada komponen induk-View.js-php.cn

Rumah

hujung hadapan web

View.js

Cara menghantar nilai daripada subkomponen vue kepada komponen induk

青灯夜游

Jul 27, 2021 am 11:29 AM

vue Komunikasi komponen

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.

Cara menghantar nilai daripada subkomponen vue kepada komponen induk

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(&#39;getTreeData&#39;,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

Cara menghantar nilai daripada subkomponen vue kepada komponen induk

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Skop pembolehubah PHP dijelaskan

4 minggu yang lalu By 百草

Di sini ' s Apabila OnePlus anda akan mendapat Android 16 (Oxygenos 16)

1 bulan yang lalu By DDD

Petua untuk menulis komen php

4 minggu yang lalu By 百草

Mengulas kod dalam php

4 minggu yang lalu By 百草

<🎜>: Tumbuh Taman - Panduan Lengkap untuk Melancong Pedagang

3 minggu yang lalu By Jack chen

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Laravel

1604

Tutorial PHP

1510

276

Tunjukkan Lagi

Related knowledge

Apakah kepentingan transformasi kereaktifan Vue (eksperimen, kemudian dikeluarkan) dan matlamatnya? Jun 20, 2025 am 01:01 AM

ReaktivityTransforminVueSformedToSimplifyHandlingReActiveDataByautomatiallyTrackingAngingReActivityWithoutrequiringManualRef

Bagaimanakah pengantarabangsaan (I18N) dan penyetempatan (L10N) dilaksanakan dalam aplikasi VUE? Jun 20, 2025 am 01:00 AM

PengantaraburanandlocalizationInvueAppsarePrimaryHandledusingTheVUEI18nplugin.1.Installvue-I18nvianpmoryarn.2.Createlo CalejsonFiles (mis., En.json, Es.json) fortranslationMessages.3.Setupthei18ninstanceinmain.jswithlocaleconfigurationandMessageFil

Apakah penyerahan sampingan pelayan SSR di Vue? Jun 25, 2025 am 12:49 AM

Server-siderendering (SSR) InvueImproveSperformanceAndSeobyGeneratingHtmlontheserver.1.TheserverRunsvueAppcodeandeandGeneratesHtmlBaseonTheCurrentRoute.2.THATHTMLISSENTTOTHEBROVERSERISTHISTHISHISTISTHISHISHISHISHISHISHISHISTHISHISHISTIS.3.3

Bagaimana untuk membina perpustakaan komponen dengan Vue? Jul 10, 2025 pm 12:14 PM

Membina perpustakaan komponen VUE memerlukan merancang struktur di sekitar senario perniagaan dan mengikuti proses pembangunan, ujian dan pelepasan yang lengkap. 1. Reka bentuk struktur harus diklasifikasikan mengikut modul berfungsi, termasuk komponen asas, komponen susun atur dan komponen perniagaan; 2. Gunakan pembolehubah SCSS atau CSS untuk menyatukan tema dan gaya; 3. Menyatukan spesifikasi penamaan dan memperkenalkan eslint dan lebih cantik untuk memastikan gaya kod yang konsisten; 4. Paparkan penggunaan komponen di tapak dokumen sokongan; 5. Gunakan Vite dan alat lain untuk pakej sebagai pakej NPM dan konfigurasikan rollupOptions; 6. Ikuti spesifikasi Semver untuk menguruskan versi dan changelogs semasa penerbitan.

Bagaimana untuk melaksanakan peralihan dan animasi di Vue? Jun 24, 2025 pm 02:17 PM

ToaddtransitionsandanimationsinVue,usebuilt-incomponentslikeand,applyCSSclasses,leveragetransitionhooksforcontrol,andoptimizeperformance.1.WrapelementswithandapplyCSStransitionclasseslikev-enter-activeforbasicfadeorslideeffects.2.Useforanimatingdynam

Cara Menggunakan PHP untuk membangunkan Platform Komuniti Q & A Penjelasan terperinci mengenai model pengewangan komuniti interaktif PHP Jul 23, 2025 pm 07:21 PM

1. 2. Prestasi tinggi memerlukan pergantungan pada cache (redis), pengoptimuman pangkalan data, CDN dan giliran tak segerak; 3. Keselamatan mesti dilakukan dengan penapisan input, perlindungan CSRF, HTTPS, penyulitan kata laluan dan kawalan kebenaran; 4. Pengiklanan pilihan wang, langganan ahli, ganjaran, komisen, pembayaran pengetahuan dan model lain, terasnya adalah untuk memadankan nada komuniti dan keperluan pengguna.

Cara Membangunkan Sistem Borang Pintar AI Dengan Reka Bentuk dan Analisis Pistol PHP PHP Jul 25, 2025 pm 05:54 PM

Apabila memilih rangka kerja PHP yang sesuai, anda perlu mempertimbangkan secara komprehensif mengikut keperluan projek: Laravel sesuai untuk pembangunan pesat dan menyediakan enjin template eloquentorm dan bilah, yang mudah untuk operasi pangkalan data dan rendering bentuk dinamik; Symfony lebih fleksibel dan sesuai untuk sistem kompleks; Codeigniter adalah ringan dan sesuai untuk aplikasi mudah dengan keperluan prestasi tinggi. 2. Untuk memastikan ketepatan model AI, kita perlu memulakan dengan latihan data berkualiti tinggi, pemilihan penunjuk penilaian yang munasabah (seperti ketepatan, penarikan balik, nilai F1), penilaian prestasi biasa dan penalaan model, dan memastikan kualiti kod melalui ujian unit dan ujian integrasi, sambil terus memantau data input untuk mencegah data drift. 3. Banyak langkah diperlukan untuk melindungi privasi pengguna: menyulitkan dan menyimpan data sensitif (seperti AES

Apakah plugin tersuai di Vue? Jun 26, 2025 am 12:37 AM

Untuk membuat plug-in Custom Vue, ikuti langkah-langkah berikut: 1. Tentukan objek plug-in yang mengandungi kaedah pemasangan; 2. Memperluas Vue dengan menambah kaedah global, kaedah contoh, arahan, pencampuran atau pendaftaran komponen dalam pemasangan; 3. Mengeksport pemalam untuk mengimport dan menggunakan di tempat lain; 4. Daftar pemalam melalui vue.use (yourplugin) dalam fail aplikasi utama. Sebagai contoh, anda boleh membuat plugin yang menambah kaedah formatcurrency $ untuk semua komponen, dan tetapkan vue.prototype. $ Formatcurrency dalam pemasangan. Apabila menggunakan pemalam, berhati-hati untuk mengelakkan pencemaran ruang nama global yang berlebihan, mengurangkan kesan sampingan, dan pastikan setiap pemalam adalah

See all articles