fungsi refs dalam Vue3: akses terus kepada contoh komponen

Fungsi rujukan dalam Vue3: akses terus kepada tika komponen

Dalam Vue3, fungsi baharu bernama ref telah ditambahkan, yang boleh mengakses tika komponen secara langsung, memberikan pembangun kaedah pembangunan yang lebih mudah. Dalam artikel ini, kami akan menyelami fungsi ref dalam Vue3 untuk memahami cara menggunakannya dan nilainya kepada pembangunan komponen.

Kaedah rujukan Vue2

Dalam Vue2, kita boleh menggunakan $refs untuk merujuk komponen atau elemen Sebagai contoh, kita boleh mendapatkan contoh komponen melalui kod berikut:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myComponentRef)
  }
}
</script>

. Dalam cangkuk yang dipasang, kami mengakses contoh komponen melalui ini.$refs.myComponentRef, yang memudahkan pengendalian komponen kami pada tahap tertentu. Walau bagaimanapun, dalam Vue2, $refs mempunyai masalah berikut:

1. Memandangkan $refs ditetapkan dalam cangkuk yang dipasang, jika komponen digunakan serta-merta selepas pemaparan, tika komponen mungkin tidak ditemui.
2. Memandangkan $refs hanyalah objek mudah, apabila kita ingin mendengar peristiwa atau kaedah komponen, kita perlu mengikatnya secara manual dalam cangkuk yang dipasang.
3. Dalam kes komponen bersarang, jika anda menggunakan $refs untuk mengakses contoh komponen cucu, anda perlu melakukan operasi rekursif pada $refs.

Kaedah rujukan Vue3

Berbanding dengan Vue2, fungsi rujukan baharu Vue3 mengoptimumkan kaedah rujukan komponen. Menggunakan fungsi refs, anda boleh terus mengakses contoh komponen tanpa menggunakan $refs, dengan itu mengelakkan masalah Vue2.

Kami boleh mendapatkan contoh komponen melalui kod berikut:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const myComponentRef = ref(null)
    return {
      myComponentRef
    }
  },
  mounted() {
    console.log(this.myComponentRef)
  }
}
</script>

Dalam Vue3, kami menggunakan fungsi ref untuk menukar myCompomentRef menjadi pembolehubah reaktif. Objek yang mengandungi myComponentRef dikembalikan dalam cangkuk persediaan dan terdedah dalam komponen. Dalam cangkuk yang dipasang, kita boleh terus mengakses contoh komponen melalui this.myComponentRef.

Jika kita perlu mengakses contoh komponen cucu, kita juga boleh melakukannya secara terus melalui fungsi rujukan:

<template>
  <div>
    <parent-component ref="parentComponentRef"></parent-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const parentComponentRef = ref(null)
    return {
      parentComponentRef
    }
  },
  mounted() {
    console.log(this.parentComponentRef.value.$refs.childComponentRef)
  }
}
</script>

Dalam contoh ini, kita mendapat contoh komponen induk melalui fungsi rujukan. Dalam cangkuk yang dipasang, kita boleh mengakses contoh komponen cucu melalui this.parentComponentRef.value.$refs.childComponentRef.

Ringkasan

Dalam Vue3, fungsi ref menyediakan cara yang lebih intuitif dan mudah untuk mengakses contoh komponen, mengelakkan masalah yang wujud dalam Vue2. Ia juga merupakan salah satu ciri baharu Vue3, dan disyorkan agar pembangun menguasainya. Selain menggunakannya dalam cangkuk persediaan, kami juga boleh menggunakannya dalam templat, contohnya:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="() => myComponentRef.value.update()">update</button>
  </div>
</template>

Dalam contoh ini, kami mengikat acara klik, dan apabila butang diklik, myComponentRef.value.update( dipanggil ) kaedah, supaya kita tidak perlu mengikat peristiwa secara manual dalam cangkuk yang dipasang.

Akhir sekali, saya harap artikel ini dapat membantu penggunaan fungsi ref dalam Vue3, dan juga boleh memberikan beberapa idea dan rujukan untuk pembangun Vue3.

Atas ialah kandungan terperinci fungsi refs dalam Vue3: akses terus kepada contoh komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!