So erstellen Sie eine Vue-Komponente mit exportierbaren Funktionen
P粉458725040
P粉458725040 2023-09-11 20:34:15
0
1
596

Ich versuche zu verstehen, wie man Komponenten mithilfe exportierbarer Funktionen erstellt. Beispiel: Ich möchte ein Meldungsfeld erstellen, das auf dem Bildschirm angezeigt wird, wenn die aus dieser Komponente importierte Methode showMessage() in anderen Komponenten aufgerufen wird. In der Nachrichtenbox-Komponente möchte ich die Logik und Vorlage beschreiben. Wie erreicht man das? Für etwaige Dokumentationen/Artikel hierzu wären wir sehr dankbar.

P粉458725040
P粉458725040

Antworte allen(1)
P粉320361201
  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框架 - alertVuetify - dialog api等(每个框架都有这些东西)

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage