英文:
How to create Vue component with exportable function?
问题
我试图理解如何创建具有可导出函数的组件。
例如：我想创建一个消息框，当我在其他组件中调用从该组件导入的showMessage()方法时，它将显示在屏幕上。
在消息框组件中，我想描述逻辑和模板。
如何实现这一点？非常感谢任何关于此的文档/文章，如果有的话。
英文:
I am trying to understand how to create components with exportable functions.
For example: i want to create message box, that will appear on screen when in some other component i call method showMessage() imported from this component.
In message box component i want to describe logic and template.
How to reach this? Very appreciate any docs/articles about this, if any.
答案1
得分: 0
-
在 App.vue（或其他全局文件）中挂载您的消息组件，
-
使用存储中的函数来控制其属性
例如
<MyMessage :value="isOpen" :title="title" :message="message" />
...
<script setup>
...
const isOpen = reactive(piniaStore().message.isOpen);
const title = computed(() => piniaStore().message.title);
...
</script>
// 存储
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 等（每个框架都有这些功能）
英文:
-
mount your message component in App.vue (or in other global file),
-
control its props with function in store
like
<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({{});
// do reactive things..
const showMessage(title, _message) => {
message.title = title;
message.message = _message;
message.isOpen = true;
}
...
then you can call the message with piniaStore().showMessage(...) wherever you want
(this code is a concept, you have to develop if you want to run properly..)
but i think you can use Quasar framework - Dialog ($q.dialog is exactly what you need!)
or Ionic framework - alert, Vuetify - dialog api etc (every framework has these things)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论