Penggunaan dan langkah berjaga-jaga $refs dalam Vue

Penggunaan dan langkah berjaga-jaga $refs dalam Vue

Dalam Vue, $refs ialah atribut khas yang digunakan untuk mengakses rujukan kepada komponen atau elemen. Melalui $refs, kami boleh mendapatkan contoh elemen atau subkomponen DOM dengan mudah dan beroperasi serta berinteraksi dengannya. Artikel ini akan memperkenalkan penggunaan $refs dan memberikan beberapa perkara untuk diberi perhatian.

1. Gunakan $refs

1. untuk mendapatkan rujukan elemen DOM

Dalam templat, jika anda menambah atribut ref pada elemen DOM, anda boleh menggunakan $refs untuk mendapatkan rujukan elemen DOM. Contohnya:

Dalam contoh di atas, atribut ref ditambahkan pada elemen input dan dinamakan "inputElement". Rujukan kepada elemen DOM boleh diperoleh melalui ini.$refs.inputElement, dan kemudian kaedah fokusnya dipanggil untuk mendapatkan fokus.

2. Dapatkan rujukan subkomponen

Begitu juga, kita juga boleh mendapatkan rujukan subkomponen melalui $refs dan kaedah panggilan dalam subkomponen atau akses sifatnya. Contohnya:

Dalam contoh di atas, kami memperkenalkan komponen kanak-kanak yang dipanggil ChildComponent dan menggunakannya dalam templat. Dengan menambahkan atribut ref pada komponen anak dan menamakannya "childComponent", kita boleh mendapatkan rujukan kepada komponen anak melalui ini.$refs.childComponent dan memanggil kaedah childMethodnya.

2. Nota

1. Masa kemas kini $refs

Perlu diambil perhatian bahawa $refs diperoleh selepas tika Vue dipaparkan. Ini bermakna $refs tidak boleh diperoleh dengan betul dalam fungsi cangkuk kitaran hayat yang dibuat daripada tika Vue. Jika anda perlu menggunakan $refs dalam create, anda boleh menangguhkan pelaksanaan melalui fungsi nextTick.

created() { this.$nextTick(() => { // 在这里可以正确获取到$refs }); }

2. Kemas kini dinamik $refs

$refs hanya akan ditetapkan dan dikemas kini semasa proses pemaparan contoh komponen Oleh itu, elemen DOM yang dijana secara dinamik menggunakan v-if atau v-for dalam templat tidak boleh dilalui $ Diperolehi daripada rujukan. Jika anda perlu mengemas kini $refs secara dinamik, anda boleh menggunakan atribut utama.

Dalam contoh di atas, dengan menambahkan atribut utama pada subkomponen dan mengikatnya pada pembolehubah uniqueKey, kemas kini dinamik $refs boleh dicetuskan apabila menukar subkomponen.

3 Summary

$refs ialah ciri yang sangat praktikal dalam Vue, yang boleh mendapatkan rujukan kepada elemen atau subkomponen DOM dengan mudah dan beroperasi serta berinteraksi dengannya. Apabila menggunakan $refs, anda perlu memberi perhatian kepada pemasaan kemas kini dan kaedah kemas kini dinamiknya. Saya harap pengenalan dalam artikel ini dapat membantu anda menggunakan dan memahami ciri $refs dalam Vue dengan lebih baik.

Atas ialah kandungan terperinci Penggunaan dan langkah berjaga-jaga $refs dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!