建立具有可匯出函數的Vue組件的方法
P粉458725040
P粉458725040 2023-09-11 20:34:15
0
1
594

我正在嘗試理解如何使用可匯出函數建立元件。 例如:我想建立一個訊息​​框,在其他元件中呼叫從該元件匯入的showMessage()方法時,它將出現在螢幕上。 在訊息框元件中,我想描述邏輯和模板。 如何實現這一點?非常感謝任何關於此的文檔/文章,如果有的話。

P粉458725040
P粉458725040

全部回覆(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等(每個框架都有這些東西)

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板