$refs dalam Vue ialah ciri yang sangat mudah yang membolehkan kami mengakses komponen dan elemen HTML dalam tika Vue. Ciri ini membolehkan kami mengakses terus elemen DOM dalam templat, sifat yang dikira, kaedah dan cangkuk kitaran hayat serta boleh memudahkan penulisan kod. Artikel ini akan memperkenalkan cara menggunakan $refs untuk mengakses komponen dan elemen HTML dalam Vue.
1. Komponen Akses
Dalam Vue, komponen adalah modul penting Kami akan menggunakan banyak komponen dalam projek, jadi akses kepada komponen diperlukan. Jadi, bagaimana kita boleh menggunakan $refs untuk mengakses komponen?
Dalam Vue, kita boleh menetapkan atribut ref untuk komponen tersebut. Dalam templat atau JS, kita boleh menggunakan $refs untuk mengakses komponen ini.
Mari tulis contoh:
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b
<child-component ref="myComponent"></child-component>
16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent daripada './ChildComponent.vue'
eksport lalai {
komponen: {
ChildComponent
},
dipasang ( ) {
this.$refs.myComponent.doSomething()
}
}
2cacc6d41bbb37262a98f745aa00fbf0
Dalam contoh ini, kami merujuk komponen anak bernama ChildComponent dalam komponen induk dan Menambah atribut ref untuk akses. Dalam cangkuk kitaran hayat yang dipasang, kita boleh mengakses komponen ini dan memanggil kaedah doSomething komponen ini.
Ringkasnya, sangat mudah untuk menggunakan $refs untuk mengakses komponen, dan kami boleh menggunakannya secara langsung untuk operasi capaian.
2. Mengakses elemen HTML
Ia juga sangat mudah untuk menggunakan $refs untuk mengakses elemen HTML. Kita juga boleh menetapkan atribut ref untuk elemen dan kemudian menggunakan $refs untuk mengakses elemen ini dalam JS. Mari tulis contoh:
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b
<input type="text" ref="myInput">
16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
< . skrip>
eksport lalai {
mounted() {
this.$refs.myInput.focus()
}
}
2cacc6d41bbb37262a98f745aa00fbf0
Dalam contoh ini, kami memberikan input Unsur menambah atribut ref untuk akses Dalam cangkuk kitaran hayat yang dipasang, kami memanggil kaedah fokus() untuk menjadikan elemen input sebagai fokus.
Begitu juga, ia juga sangat mudah untuk menggunakan $refs untuk mengakses elemen HTML. Kami boleh terus menambah atribut ref pada elemen dalam templat untuk melaksanakan operasi capaian.
3. Perkara yang perlu diberi perhatian
Dalam Vue, sangat mudah untuk menggunakan $refs untuk mengakses komponen dan elemen HTML, tetapi ia mesti digunakan dengan berhati-hati. Komponen dan elemen yang diakses oleh $refs mestilah telah diberikan. Jika anda mengakses elemen atau komponen sebelum memasangnya, anda akan mendapat undefined.
Dalam komponen Vue, jika kami melakukan operasi tak segerak atau memanipulasi data, cangkuk kitaran hayat komponen ini akan berubah. Perubahan ini boleh menyebabkan $refs kembali tidak ditentukan. Oleh itu, berhati-hati apabila menggunakan $refs dan pastikan bahawa apabila mengakses elemen atau komponen ia telah dipaparkan.
Dalam masa yang sama, kita juga perlu memberi perhatian kepada penamaan komponen bagi memastikan keunikannya. Kerana apabila komponen diakses melalui $refs, ia diakses mengikut nama Jika terdapat berbilang komponen dengan nama yang sama, komponen yang salah boleh diakses.
4. Ringkasan
Dalam Vue, sangat mudah untuk menggunakan $refs untuk mengakses komponen dan elemen HTML. Cuma tambahkan atribut ref pada komponen atau elemen dan anda boleh mengaksesnya dalam JS. Walau bagaimanapun, kita perlu berhati-hati bahawa komponen atau elemen yang dikembalikan oleh $refs telah pun diberikan, dan kita perlu memberi perhatian kepada penamaan komponen untuk memastikan keunikannya.
Dalam pembangunan sebenar, kami boleh menggunakan $refs bersama-sama dengan arahan v-if, v-for dan lain-lain untuk membantu kami menyelesaikan projek dengan lebih baik. Sudah tentu, apabila menggunakan $refs, pastikan anda tidak menggunakannya secara berlebihan, dan elakkan mengubah suai data secara langsung dalam komponen anak dalam komponen induk, yang akan memusnahkan prinsip aliran data sehala.
Atas ialah kandungan terperinci Cara menggunakan $refs untuk mengakses komponen dan elemen HTML dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
