Penjelasan terperinci tentang fungsi SetupContext dalam Vue3: Kuasai penggunaan API komponen Vue3

Dengan keluaran rasmi Vue3, pembangun Vue.js boleh mula membangun menggunakan ciri baharu dan kaedah APInya. Antaranya, fungsi SetupContext ialah kaedah API yang penting dalam Vue3, menyediakan banyak fungsi mudah supaya kita boleh menulis komponen Vue3 dengan lebih baik. Dalam artikel ini, saya akan memperkenalkan penggunaan fungsi SetupContext secara terperinci.

1. Apakah fungsi SetupContext?

Fungsi SetupContext ialah kaedah API yang disediakan dalam Vue3 Ia dipanggil dalam fungsi persediaan() komponen. Fungsi ini mengembalikan objek yang mengandungi sifat berikut:

props: parameter props yang diterima oleh komponen; Acara tersuai untuk komponen.
Kita boleh mendapatkan maklumat seperti prop, slot dan acara tersuai yang diluluskan dalam komponen dengan memperkenalkan fungsi SetupContext dan menggunakannya dalam fungsi setup().

2. Atribut props

Dalam Vue3, kita tidak perlu lagi mengisytiharkan parameter prop yang perlu digunakan dalam konfigurasi terperinci komponen. Sebaliknya, dalam fungsi setup() komponen, dapatkan parameter props masuk dengan menggunakan atribut props.

Dengan cara ini, kita tidak perlu lagi menggunakan ini.$props untuk mendapatkan parameter props yang diluluskan seperti dalam Vue2. Contohnya:

//Dapatkan parameter props dalam Vue2

props: ['message'],

mounted() {

console.log(this.$props.message)
}

//Dapatkan parameter props daripada atribut props dalam Vue3
setup(props) {

console.log(props.message)

}
Dalam Vue3, dapatkan parameter props Ia menjadi sangat mudah dengan sendirinya. Dalam fungsi setup() komponen, parameter props yang diterima boleh diakses terus dengan menggunakan atribut props.

Jika parameter prop bagi komponen ialah objek, dan semua sifatnya perlu digunakan dalam fungsi persediaan(). Tugasan boleh dilakukan menggunakan sintaks pemusnahan. Contohnya:
persediaan({ message, author }) {

console.log(message, author)

}
Dalam contoh ini, kami menggunakan sintaks pemusnah objek untuk menetapkan mesej dan atribut pengarang dalam prop kepada mesej pembolehubah dan pengarang .

Perlu diambil perhatian bahawa parameter prop dalam Vue3 telah menjadi atribut baca sahaja dan tidak menyokong pengikatan dua hala. Jika kita perlu mengubah suai parameter props, kita perlu menghantar mesej kepada komponen induk melalui kaedah emit().

3. Atribut Attrs

Selain atribut props, objek SetupContext juga mengandungi atribut attrs. Sifat ini mengandungi semua sifat yang tidak ditentukan dalam komponen. Contohnya:

// Komponen kami ditakrifkan seperti berikut:

props: {

mesej: String
},
setup(props, {attrs}) {

console.log(attrs.color) // 'red'

}

// Apabila menggunakan komponen, atribut warna dihantar

27b3b39f1f3dc2bbcec9683da32de1ea

Dalam contoh ini , Kami mentakrifkan komponen komponen contoh dan memberikannya sifat warna yang tidak ditentukan. Apabila menggunakan fungsi SetupContext, kita boleh mendapatkan atribut yang tidak ditentukan ini melalui atribut attrs.

Perlu diambil perhatian bahawa atribut attrs dalam Vue3 juga merupakan atribut baca sahaja dan tidak menyokong pengikatan dua hala.

4. atribut slot

Vue3 juga menyediakan atribut slot, yang betul-betul sama dengan Vue2. Kita boleh menggunakan atribut slot untuk mengakses slot yang diluluskan dalam komponen. Contohnya:

// Komponen kami ditakrifkan seperti berikut

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<slot></slot>

16b28748ea4df4d9c2150843fecfba68
d7f87a1479338fcc03185f92dd17e732

e388a4556c0f65e1904146cc1a846beeBaris pertama teks94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeBaris kedua teks08978e5830eb1a501a563cac3d7308d0
Dalam contoh ini, kami mentakrifkan komponen komponen contoh dan memasukkan dua baris teks ke dalam slotnya. Dalam fungsi persediaan(), kami menggunakan atribut slot untuk mengakses dua baris teks ini.

Perlu diambil perhatian bahawa slot dalam Vue3 dibahagikan kepada slot lalai dan slot dinamakan. Oleh itu, apabila mendapatkan slot bernama, anda perlu mendapatkannya melalui slot[name]().

5. Kaedah memancarkan

Sama seperti dalam Vue2, kaedah emit menyediakan fungsi komponen menghantar mesej kepada komponen induk. Dalam Vue3, kaedah emit juga boleh dipanggil dalam fungsi persediaan() dan diakses melalui objek yang dikembalikan dalam fungsi persediaan(). Contohnya:

//Komponen induk ditakrifkan seperti berikut

4cbd4287dc694340504c2f232e73ffce

//Subkomponen ditakrifkan seperti berikut
setup(_, { emit }) {

function handleClick() {
  emit('example-event', 'example data')
}
return {
  handleClick
}

}
Dalam contoh ini, kami mentakrifkan kaedah handleClick untuk lulus contoh acara kepada komponen induk -event dan data contoh data yang disertakan.

Perlu diambil perhatian bahawa kaedah emit() dalam Vue3 telah menjadi kaedah baca sahaja dan kami tidak boleh mengubah suai tingkah lakunya.

6. Kesimpulan

Dalam artikel ini, kami membincangkan fungsi SetupContext dalam Vue3 dan sifat serta kaedah yang terkandung di dalamnya secara terperinci. Menguasai ciri dan kaedah API Vue.js 3 ini membolehkan kami menulis komponen Vue3 dengan lebih fleksibel dan menyesuaikan diri dengan pelbagai senario perniagaan dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi SetupContext dalam Vue3: Kuasai penggunaan API komponen Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!