How to create a Vue component with exportable functions

Question

I'm trying to understand how to create a component using exportable functions. For example: I want to create a message box that will appear on the screen when the showMessage() method imported from this component is called in other components. In the message box component I want to describe the logic and template. How to achieve this? Any documentation/articles on this, if any, would be greatly appreciated.

P粉320361201 · Answer

Mount your message component in App.vue (or other global files),
Control its props through functions in the store

For example

...

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

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

You can then call the message anywhere using piniaStore().showMessage(...)

(This code is just a concept, if you want it to work properly, you need to develop it...)

But I think you can use Quasar framework - Dialog ($q.dialog is exactly what you need!) Or Ionic framework - alert, Vuetify - dialog api, etc. (each framework has these things)