Analisis ringkas kitaran hayat dan perkongsian data dalam Vue

Artikel ini akan membantu anda terus belajar Vue, dan memperkenalkan secara terperinci kitaran hayat dan perkongsian data yang merupakan pengetahuan penting untuk bermula dengan Vue. Saya harap ia akan membantu semua orang.

1. Kitaran hayat komponen

1.1 Kitaran hayat & fungsi kitaran hayat

1️⃣ Kitaran Hayat merujuk kepada keseluruhan peringkat komponen daripada penciptaan → berjalan → kemusnahan menekankan tempoh masa . (Belajar perkongsian video: tutorial video vue)

2️⃣ Fungsi kitaran hayat: Ia adalah

fungsi terbina dalam yang disediakan oleh rangka kerja vue, yang akan mengiringi kehidupan kitaran komponen, Laksanakan secara automatik mengikut urutan.

? Peringatan hangat?:

Kitaran hayat menekankan tempoh masa, Fungsi kitaran hayat menekankan titik masa.

1.2 Pengelasan fungsi kitaran hayat komponen

1.3 Gambar rajah kitaran hayat Paparan

Anda boleh merujuk kepada "rajah kitaran hayat" yang diberikan dalam dokumentasi rasmi vue untuk memahami lebih lanjut proses pelaksanaan kitaran hayat komponen:

https://cn.vuejs. org/ v2/guide/instance.html#Rajah kitaran hayat

---

2 Perkongsian data antara komponen

2.1 Perhubungan antara komponen

Dalam pembangunan projek, perhubungan yang paling biasa antara komponen dibahagikan kepada dua jenis berikut:

• Hubungan bapa-anak

• Hubungan abang

2.2 Perkongsian data antara komponen ibu bapa dan anak

Perkongsian data antara komponen ibu bapa dan anak dibahagikan kepada:

• Ibu bapa → Anak Data kongsi

• Anak→ Ibu bapaData kongsi

2.2.1 Komponen induk kepada anak Bahagian komponen data

Komponen induk berkongsi data dengan komponen anak menggunakan

atribut tersuai . Kod sampel adalah seperti berikut:

2.2.2 Komponen kanak-kanak berkongsi data dengan komponen induk

Komponen kanak-kanak berkongsi data dengan komponen induk menggunakan

Acara tersuai. Kod sampel adalah seperti berikut:

2.3 Perkongsian data antara komponen adik beradik

Dalam vue2.x, komponen adik beradik Penyelesaian perkongsian data antara mereka ialah

EventBus.
? Langkah untuk menggunakan EventBus?:

Buat modul
1. dan kongsi objek contoh Vue secara luaran eventBus.js
hantar data pada data bahagian penerima, panggil kaedah
2. ('nama acara', data yang akan dihantar) untuk mencetuskan acara tersuai di bahagian penerima data, panggil kaedah bus.$emit('nama acara', fungsi pengendalian acara) untuk mendaftar; Acara tersuai;
3. bus.$on

3 Rujukan Rujukan

---

3.1 Apakah rujukan Ruj

1️⃣ ref digunakan untuk membantu pembangun mendapatkan rujukan kepada elemen atau komponen DOM tanpa bergantung pada jQuery

.

2️⃣ Setiap tika komponen vue mengandungi objek $refs

, yang menyimpan rujukan kepada elemen atau komponen DOM yang sepadan. Secara lalai, $refs komponen

menghala ke objek kosong . Demonstrasi kod adalah seperti berikut:

3.2 Gunakan rujukan untuk merujuk elemen DOM

Jika anda ingin menggunakan Jika ref merujuk kepada elemen DOM pada halaman, ia boleh dikendalikan seperti berikut:

Kod ditunjukkan seperti berikut:

3.3 Gunakan ref untuk merujuk contoh komponen

Jika anda mahu untuk menggunakan ref Untuk merujuk contoh komponen pada halaman, anda boleh mengendalikan seperti berikut:

3.4 Kawal penukaran atas permintaan kotak teks dan butang

Gunakan nilai Boolean inputVisible untuk mengawal penukaran atas permintaan kotak teks dan butang dalam komponen. Kod sampel adalah seperti berikut:

3.5 Biarkan kotak teks mendapat fokus secara automatik

Selepas kotak teks berada dipaparkan, jika anda mahu Jika ia mendapat fokus serta-merta, anda boleh menambah rujukan rujukan kepadanya dan memanggil kaedah .focus() objek DOM asli. Kod sampel adalah seperti berikut:

3.6 kaedah ini.$nextTick(cb)

komponen $nextTick(cb) kaedah, Panggilan balik cb akan ditangguhkan kepada pelaksanaan selepas kitaran kemas kini DOM seterusnya. Pemahaman yang popular ialah: tunggu DOM komponen dikemas kini sebelum melaksanakan fungsi panggil balik cb. Ini memastikan bahawa fungsi panggil balik cb boleh beroperasi pada elemen DOM terkini.

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Analisis ringkas kitaran hayat dan perkongsian data dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!