Penjelasan terperinci tentang cara mendapatkan contoh komponen menggunakan atribut refs dalam dokumen Vue

Vue.js, sebagai rangka kerja bahagian hadapan, telah semakin digunakan secara meluas dalam bidang pembangunan bahagian hadapan dalam beberapa tahun kebelakangan ini. Dalam dokumentasi rasmi Vue, kita boleh melihat banyak panduan dan petua pembangunan yang berguna. Antaranya, atribut refs adalah salah satu kaedah untuk mendapatkan contoh komponen Hari ini kita akan belajar tentang atribut ini secara terperinci.

Konsep asas atribut refs

refs ialah atribut Vue.js, digunakan untuk mendapatkan nod DOM atau contoh subkomponen dalam komponen. Ia boleh membantu kami mengakses elemen DOM, kaedah dan sifat komponen anak dalam komponen induk, dengan itu berinteraksi secara langsung dengan komponen anak. Melalui atribut refs, kami boleh mengakses data dan kaedah secara langsung di dalam komponen anak tanpa menghantar data dan kaedah melalui prop dan acara.

Penggunaan atribut refs

Penggunaan asas atribut refs adalah seperti berikut:

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <input ref="inputBox" type="text"/>
    <ChildComponent ref="childComponent"/>
  </div>
</template>

Dalam templat di atas, kita boleh menambah atribut ref pada nod DOM atau sub-komponen Tambahkan atribut ref untuk mendapatkan kejadiannya. Pada ketika ini, kita boleh menggunakan ini.$refs dalam komponen induk atau tika Vue untuk mengakses tika mereka.

export default {
  mounted() {
    // 访问inputBox实例
    this.$refs.inputBox.focus();

    // 访问childComponent实例
    this.$refs.childComponent.doSomething();
  }
}

Dalam cangkuk yang dipasang, kita boleh mengakses kejadian subkomponen melalui ini.$refs untuk mendapatkan kaedah dan sifatnya. Sebagai contoh, dalam kod di atas, kita boleh mengakses contoh kotak input melalui ini.$refs.inputBox dan memanggil kaedah focus() dengan cara yang sama, kita boleh mengakses contoh komponen anak melalui ini.$refs.childComponent dan panggilnya Panggil kaedah doSomething()nya.

Selain itu, atribut refs juga boleh mencipta tatasusunan melalui [ref + v-for] dan mengikat setiap ref kepada setiap elemen dalam tatasusunan.

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <div v-for="i in 5" :key="i" :ref="'item'+i">{{ i }}</div>
  </div>
</template>

Dalam templat di atas, kami menggunakan arahan v-for untuk melintasi tatasusunan, dan setiap elemen akan menjana nombor. Kemudian kita boleh menggunakan nombor ini dalam atribut ref untuk mencipta tatasusunan dan mengikatnya pada setiap elemen secara individu.

export default {
  mounted() {
    // 访问Ref数组中的元素
    console.log(this.$refs.item1.innerHTML); // 1
    console.log(this.$refs.item2.innerHTML); // 2
    console.log(this.$refs.item3.innerHTML); // 3
    console.log(this.$refs.item4.innerHTML); // 4
    console.log(this.$refs.item5.innerHTML); // 5
  }
}

Dengan kod di atas, kita boleh mengakses atribut innerHTML setiap elemen, yang mengeluarkan 1, 2, 3, 4, 5.

Ringkasan

Atribut refs ialah kaedah penting untuk mendapatkan tika komponen dalam Vue.js Ia membolehkan kami mengakses nod, kaedah dan sifat DOM dalam sub-komponen dengan lebih mudah. Sama ada anda sedang membangunkan halaman web ringkas atau aplikasi web yang kompleks, anda boleh menggunakan atribut rujukan untuk memudahkan kod anda dan meningkatkan kecekapan pembangunan.

Perlu diperhatikan bahawa atribut refs hanya boleh digunakan apabila anda perlu mengakses terus komponen atau elemen anak. Jika anda ingin mewujudkan komunikasi antara dua komponen, menggunakan prop dan acara adalah lebih sesuai.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara mendapatkan contoh komponen menggunakan atribut refs dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!