parameter kaedah vue refs

Dengan pembangunan berterusan teknologi bahagian hadapan, rangka kerja Vue sudah pasti telah menjadi rangka kerja bahagian hadapan yang paling popular. Kerumitan komponen Vue juga semakin meningkat Oleh itu, rangka kerja Vue menyediakan banyak API untuk menjadikan pembangunan lebih fleksibel dan cekap. Salah satunya ialah kaedah rujukan. Kaedah refs digunakan untuk mengakses contoh atau elemen komponen dalam Vue. Artikel ini akan memperkenalkan parameter kaedah rujukan Vue dan penggunaannya.

Apakah kaedah rujukan?

Apabila Vue mencipta komponen, ia memberikan nama unik kepada komponen supaya ia boleh digunakan dalam komponen lain. Nama ini dipanggil "rujukan" kerana ia digunakan sebagai penunjuk untuk merujuk komponen. Kaedah rujukan perlu menentukan nama untuk komponen atau elemen, dan kemudian contoh komponen atau elemen boleh diakses melalui nama ini.

penggunaan refs

Dalam Vue, kita boleh menggunakan v-bind atau v-on untuk mengikat komponen atau elemen dan rujukan bersama. Sebagai contoh, dengan mengandaikan kita mempunyai komponen, kita boleh menggunakan kod berikut untuk mengikatnya kepada nama rujukan.

<custom-component v-bind:ref="myComponentRef"></custom-component>

Kami kini boleh mengakses tika komponen melalui kaedah rujukan. Sebagai contoh, dalam contoh Vue, kita boleh menggunakan kod berikut untuk mendapatkan rujukan kepada komponen.

this.$refs.myComponentRef

Jika terdapat berbilang komponen yang sama dalam contoh, kami boleh menggunakan indeks untuk mengaksesnya. Sebagai contoh, jika kita mempunyai dua komponen yang sama, kita boleh menggunakan kod berikut untuk mengaksesnya.

this.$refs.myComponentRef[0]

Kaedah ini boleh digunakan bukan sahaja pada komponen, tetapi juga pada elemen HTML. Sebagai contoh, kita juga boleh menggunakan rujukan untuk merujuk elemen div.

<div ref="myDivRef"></div>

Kita boleh menggunakan kod berikut untuk mengakses elemen div.

this.$refs.myDivRef

Jenis parameter disokong oleh rujukan

Walaupun kaedah rujukan digunakan terutamanya untuk komponen dan elemen HTML dalam Vue, kaedah ini menyokong lebih banyak jenis parameter daripada ini. Kaedah rujukan menyokong tiga jenis parameter berikut.

1. String: Sama seperti contoh yang kami senaraikan di atas, kami boleh menentukan rentetan untuk komponen atau elemen.

<custom-component v-bind:ref="myComponentRef"></custom-component>

2. Objek: Kita juga boleh menggunakan objek untuk mengikat rujukan komponen atau elemen. Sebagai contoh, kod berikut akan menggunakan nama sifat dalam objek untuk merujuk komponen.

<custom-component v-bind:ref="{myComponentRef: $refs}"></custom-component>

Dalam contoh ini, kita boleh menggunakan kod berikut untuk mendapatkan contoh komponen.

this.$refs.myComponentRef

3. Fungsi: Kaedah lain yang tersedia ialah menamakan komponen atau elemen menggunakan fungsi. Dalam kaedah ini, fungsi harus mengembalikan contoh komponen atau elemen HTML. Sebagai contoh, kod berikut memanggil fungsi dan menggunakan objek yang dikembalikan oleh fungsi untuk merujuk komponen.

<custom-component v-bind:ref="myComponentRef"></custom-component>

Dalam contoh ini, kami mentakrifkan fungsi yang mengembalikan tika komponen.

methods: {
  getComponentRef() {
    return this.$refs.myComponentRef;
  }
}

Kita boleh menggunakan kod berikut untuk mendapatkan contoh komponen ini.

this.$refs.getComponentRef()

Ringkasan

Dalam Vue, kaedah rujukan digunakan untuk mengakses tika komponen dan elemen HTML. Kaedah rujukan boleh menggunakan rentetan, objek atau fungsi untuk menamakan komponen atau elemen. Melalui artikel ini, kita boleh belajar tentang semua parameter kaedah rujukan dan penggunaannya. Kami percaya ini akan sangat berguna untuk pembangun yang menggunakan Vue.

Atas ialah kandungan terperinci parameter kaedah vue refs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!