Vue.js 3 事件匯流排
P粉905144514
2023-08-24 18:08:45
<p>如何在 Vue 3 中建立事件匯流排? </p>
<hr />
<p>在 Vue 2 中,它是:</p>
<pre class="brush:js;toolbar:false;">export const bus = new Vue();
</pre>
<pre class="brush:js;toolbar:false;">bus.$on(...)
bus.$emit(...)
</pre>
<hr />
<p>在Vue 3 中,<code>Vue</code> 不再是建構子,<code>Vue.createApp({});</code> 傳回一個沒有<code>$ on</code> 的物件code> 和<code>$emit</code> 方法。 </p>
在 Vue.js 版本 3 上,您可以使用第三方程式庫,也可以使用以發布者-訂閱者(PubSub 概念)程式設計模式編寫的功能。
事件.js
index.js
依照官方文件中的建議,您可以使用mitt 函式庫在元件之間調度事件,假設我們有一個側邊欄和
header 其中包含一個關閉/開啟側邊欄的按鈕,我們需要該按鈕來切換側邊欄元件內的某些屬性:
在 main.js 中匯入該函式庫並建立該發射器的實例並定義為 全域屬性:
安裝:
用法:
在標頭中發出帶有一些負載的
toggle-sidebar
事件:在側邊欄中接收具有有效負載的事件:
對於那些使用組合 API 的人,他們可以使用
emitter
,如下所示:建立檔案 src/composables/useEmitter.js
##從那裡開始,您可以使用
useEmitter
,就像使用useRouter
一樣:使用組合 API
#您也可以受益於新的組合 API 並定義可組合事件匯流排:
eventBus.js
#在元件 A 中執行以下操作:
在元件 B 中: