最近在開發(fā) Vue3 項(xiàng)目時(shí)偶然發(fā)現(xiàn)了一個(gè)技巧：組件的事件往下傳可以進(jìn)行疊加！，感覺對(duì)大家的開發(fā)肯定有幫助，能節(jié)省很多代碼量?。?！我會(huì)通過一個(gè)小案例來跟大家講解這個(gè)小技巧的好處體現(xiàn)在哪~

場(chǎng)景

先來說說我的場(chǎng)景吧，我在項(xiàng)目開發(fā)中對(duì)一個(gè)基礎(chǔ)組件 BasicComp.vue進(jìn)行二次封裝，總共封裝了兩層，如下圖

圖片

我先把 BasicComp.vue 簡(jiǎn)單化一下：

圖片

而我想要做的效果是在 Page.vue、Index.vue中都能調(diào)用BasicComp.vue身上的方法changeShow去控制show變量的改變，比如下面的效果

圖片

實(shí)現(xiàn)代碼如下：

SecondComp.vue

圖片

Index.vue

圖片

Page.vue

圖片

太麻煩了！

大家也看到了，上面的代碼實(shí)現(xiàn)非常麻煩，得一層一層利用 emits 往上傳

但是突然有一天我發(fā)現(xiàn)了一個(gè) Vue3 的特性，貌似很多人都沒發(fā)現(xiàn)，那就是：組件的事件往下傳可以進(jìn)行疊加！

什么意思呢？我通過一個(gè)小例子來說明，我準(zhǔn)備了 祖孫三個(gè)組件。

Sunzi.vue

圖片

Erzi.vue

圖片

Yeye.vue

圖片

最輸出表現(xiàn)為：

圖片

我在Erzi.vue 中并沒有去接收 Yeye.vue 傳下來的 emits，但是它卻能透?jìng)鞯絊unzi.vue 中，并且兩者疊加

代碼優(yōu)化

通過剛剛發(fā)現(xiàn)的小特性，我們可以對(duì)一開始的代碼進(jìn)行優(yōu)化

只需要封裝一個(gè) Hooks

圖片

Index.vue

圖片

Page.vue

圖片

最終達(dá)到想要的結(jié)果：

圖片

Vben-Admin受到的啟發(fā)

Vben-Admin 是一個(gè)非常出色的開源 Vue3 項(xiàng)目，它代碼中就大量使用了 事件疊加 的技巧，尤其是 Table、Drawer、Modal 這類可控組件，我也是從里面學(xué)到的技巧！