Cara mencipta komponen Vue dengan fungsi boleh eksport

Question

Saya cuba memahami cara membuat komponen menggunakan fungsi boleh eksport. Sebagai contoh: Saya ingin mencipta kotak mesej yang akan muncul pada skrin apabila kaedah showMessage() yang diimport daripada komponen ini dipanggil dalam komponen lain. Dalam komponen kotak mesej saya ingin menerangkan logik dan templat. Bagaimana untuk mencapai ini? Sebarang dokumentasi/artikel mengenai perkara ini, jika ada, amatlah dihargai.

Answer 1

1. Lekapkan komponen mesej anda dalam App.vue (atau fail global lain),

2. Kawal propnya melalui fungsi di kedai

Sebagai contoh

<MyMessage :value="isOpen" :title="title" :message="message" />

...
<script setup>
...
const isOpen = reactive(piniaStore().message.isOpen);
const title = computed (() => piniaStore().message.title);
...
</script>

// store
const message = reactive({{});

// 做一些响应式的事情..
const showMessage(title, _message) => {
   message.title = title;
   message.message = _message;
   message.isOpen = true;
}
...

Anda kemudian boleh menghubungi mesej di mana-mana sahaja menggunakan piniaStore().showMessage(...)

(Kod ini hanyalah konsep, jika anda mahu ia berfungsi dengan baik, anda perlu membangunkannya...)

---

Tetapi saya rasa anda boleh menggunakan Rangka Kerja Quasar - Dialog ($q.dialog adalah apa yang anda perlukan!) Atau Rangka kerja ionik - amaran, Vuetify - dialog api dll. (setiap rangka kerja mempunyai perkara ini)