Rumah > Artikel > hujung hadapan web > Apakah yang didedahkan dalam Vue3.2? Apa gunanya?
Dedahan baharu dalam Vue3.2 digunakan untuk apa? Artikel berikut akan memberi anda pemahaman yang baik tentang alat dedah Vue3.2 Saya harap ia akan membantu anda!
Dengan keluaran Vue 3.2, alat gubahan baharu disediakan kepada kami yang dipanggil expose
. (Belajar perkongsian video: tutorial video vue)
Pernahkah anda mencipta komponen yang perlu menyediakan beberapa kaedah dan sifat kepada templat, tetapi anda mahu kaedah ini bersifat peribadi kepada komponen dan tidak boleh Dipanggil oleh kelas induk?
Jika anda sedang membangunkan komponen sumber terbuka atau pustaka, anda mungkin mahu merahsiakan beberapa kaedah dalaman. Sebelum Vue 3.2, ini tidak mudah dicapai kerana semua kaedah atau data dsb. yang diisytiharkan dalam API pilihan adalah awam, jadi templat boleh mengaksesnya.
Perkara yang sama berlaku untuk API gubahan. Semua yang kami pulangkan daripada kaedah setup
boleh diakses terus oleh kelas induk.
Mari kita lihat contoh praktikal. Bayangkan kita mempunyai komponen yang mencipta pembilang dan mengemas kini pembilang ini setiap saat.
** MyCounter.vue**
<template> <p>Counter: {{ counter }}</p> <button @click="reset">Reset</button> <button @click="terminate">☠️</button> </template> <script> import { ref } from 'vue' export default { setup () { const counter = ref(0) const interval = setInterval(() => { counter.value++ }, 1000) const reset = () => { counter.value = 0 } const terminate = () => { clearInterval(interval) } return { counter, reset, terminate } } } </script>
Dari perspektif gubahan, saya ingin komponen induk dapat memanggil kaedah reset
terus jika perlu -- tetapi saya ingin mengekalkan terminate
fungsi dan rujukan kepada counter
hanya tersedia untuk komponen.
Jika kita membuat instantiate komponen ini ke dalam kelas induk, seperti App.vue, dan melampirkan rujukan ref padanya, kita boleh dengan mudah membiarkan kelas induk memanggil kaedah reset
, kerana apabila kita pergi dari When ia dikembalikan dalam setup
, ia telah pun terdedah bersama dengan terminate
.
App.vue
<template> <MyCounter ref="counter" /> <button @click="reset">Reset from parent</button> <button @click="terminate">Terminate from parent</button> </template> <script> import MyCounter from '@/components/MyCounter.vue' export default { name: 'App', components: { MyCounter }, methods: { reset () { this.$refs.counter.reset() }, terminate () { this.$refs.counter.terminate() } } } </script>
Jika anda menjalankan ini sekarang dan klik butang tetapkan semula atau bunuh, kedua-duanya akan berfungsi.
Mari kita jelaskan perkara yang ingin kita dedahkan (expose
) kepada kelas induk supaya hanya fungsi reset
tersedia.
** MyCounter.vue**
<script> import { ref } from 'vue' export default { setup (props, context) { const counter = ref(null) const interval = setInterval(() => { counter.value++ }, 1000) const reset = () => { counter.value = 0 } const terminate = () => { console.log(interval) clearInterval(interval) } context.expose({ reset }) return { counter, reset, terminate } } } </script>
Di sini, kami menambahkan parameter setup
dan props
pada fungsi context
. Kita perlu menyediakan konteks kerana di sinilah fungsi expose
berada. Kita juga boleh menggunakan pemfaktoran semula seperti ini: { expose }
.
Seterusnya, kami menggunakan context.expose
untuk mengisytiharkan objek elemen yang kami mahu dedahkan kepada kelas induk yang membuat instantiate komponen ini, kami hanya akan menyediakan kefungsian reset
.
Jika kami menjalankan contoh ini sekali lagi dan mengklik butang "Tamatkan daripada ibu bapa", kami akan mendapat ralat. Ciri
Uncaught TypeError: this.$refs.counter.terminate is not a function
terminate
tidak lagi tersedia dan API peribadi kami kini tidak boleh diakses.
Di atas kami menggunakan composition API
dalam exponse
, tetapi kaedah ini juga boleh digunakan dalam API pilihan. Kita boleh menulis semula seperti berikut.
// MyCounter.vue export default { created () { ... }, data: () => ({ counter: null }), methods: { reset () { ... }, terminate () { ... } }, expose: ['reset'] }
Perhatikan bahawa kami telah menambahkan sifat Options API baharu expose
yang membolehkan kami menghantar dalam tatasusunan dengan rentetan 'reset'
ialah nama fungsi yang kami dedahkan.
Cara untuk mencipta komponen yang berkuasa dan fleksibel adalah dengan memanfaatkan kuasa fungsi pemaparan. Ini bukan perkara baharu kepada Vue 3, tetapi dengan penubuhan API gubahan, kami kini mempunyai fleksibiliti untuk mengembalikan fungsi API komposisi setup
terus daripada kaedah h
.
Ini menimbulkan masalah kerana dalam fungsi setup
kami, keseluruhan pernyataan return
hanyalah kaedah h
yang mengandungi nod yang dibuat oleh komponen.
Jika kita memilih untuk mendedahkan sesuatu kepada kelas induk pada ketika ini, kita akan menghadapi masalah yang bertentangan dengan apa yang kita lihat sebelum ini. Tiada apa-apa yang terdedah kerana tiada apa yang dikembalikan kecuali elemen DOM.
Mari kita ganti komponen MyCounter.vue
untuk menggunakan kaedah ini.
<script> // The template has been deleted import { ref, h } from 'vue' export default { setup (props, context) { const counter = ref(0) const interval = setInterval(() => { counter.value++ }, 1000) const reset = () => { counter.value = 0 } const terminate = () => { clearInterval(interval) } // context.expose({ reset }) return () => h('div', [ h('p', `Counter: ${counter.value}`), h('button', { onClick: reset }, 'Reset'), h('button', { onClick: terminate }, 'Terminate') ]) } } </script>
Perhatikan bahawa kami mengimport h
daripada Vue di bahagian atas kerana kami memerlukannya untuk mencipta elemen DOM kami.
Untuk menggambarkan masalah, kaedah context.expose
diulas buat sementara waktu.
Pernyataan pemulangan kini menyalin struktur DOM <template>
kami sebelum ini dan jika kami menjalankan contoh ini, kami dapat mengklik butang tetapan semula dan mematikan pada elemen dengan betul.
Walau bagaimanapun, jika kami mengklik butang "Tetapkan semula daripada ibu bapa" sekarang, kami akan menghadapi ralat. Kaedah
Uncaught TypeError: this.$refs.counter.reset is not a function
reset
tidak lagi terdedah kerana ia tidak dikembalikan oleh fungsi setup
. Untuk menyelesaikan masalah ini, kami perlu membatalkan panggilan ke context.expose
untuk menjadikannya tersedia semula.
Kaedah expose
baharu adalah sangat intuitif dan mudah untuk dilaksanakan dalam komponen kami. Ia menyelesaikan beberapa isu komposisi yang sangat penting yang memerlukan penulisan semula keseluruhan komponen pada masa lalu, jadi walaupun ia bukan API yang anda gunakan setiap hari, ia berbaloi untuk dikumpulkan dalam folder kami dan mengumpulkan habuk.
Teks asal bahasa Inggeris: https://www.vuemastery.com/blog/understanding-vue-3-expose/
[Cadangan tutorial video berkaitan: Bermula dengan tutorial vuejs, Bermula dengan bahagian hadapan web]
Atas ialah kandungan terperinci Apakah yang didedahkan dalam Vue3.2? Apa gunanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!