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

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