创建具有可导出函数的Vue组件的方法

Question

我正在尝试理解如何使用可导出函数创建组件。 例如：我想创建一个消息框，在其他组件中调用从该组件导入的showMessage()方法时，它将出现在屏幕上。 在消息框组件中，我想描述逻辑和模板。 如何实现这一点？非常感谢任何关于此的文档/文章，如果有的话。

Answer 1

1. 在App.vue中（或其他全局文件中）挂载您的消息组件，

2. 通过store中的函数控制其props

例如

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

然后，您可以在任何地方使用piniaStore().showMessage(...)调用该消息

（这段代码只是一个概念，如果要正常运行，您需要进行开发...）

---

但我认为您可以使用Quasar框架 - Dialog（$q.dialog正是您所需的！） 或Ionic框架 - alert，Vuetify - dialog api等（每个框架都有这些东西）