Comment créer un composant Vue avec des fonctions exportables

Question

J'essaie de comprendre comment créer des composants à l'aide de fonctions exportables. Par exemple : je souhaite créer une boîte de message qui apparaîtra à l'écran lorsque la méthode showMessage() importée de ce composant sera appelée dans d'autres composants. Dans le composant de boîte de message, je souhaite décrire la logique et le modèle. Comment y parvenir ? Toute documentation/article à ce sujet, le cas échéant, serait grandement apprécié.

Answer 1

1. Montez votre composant de message dans App.vue (ou autre fichier global),

2. Contrôlez ses accessoires grâce aux fonctions du magasin

Par exemple

<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;
}
...

Vous pouvez ensuite appeler le message n'importe où en utilisant piniaStore().showMessage(...)

(Ce code n'est qu'un concept, si vous voulez qu'il fonctionne correctement, vous devez le développer...)

---

Mais je pense que vous pouvez utiliser Quasar Framework - Dialog ($q.dialog est exactement ce dont vous avez besoin !) Ou Ionic framework - alert, Vuetify - dialog api etc. (chaque framework a ces choses)