怎么用Vue編寫抽象組件

這篇文章主要介紹怎么用Vue編寫抽象組件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

看過 Vue 源碼的同學可以知道，<keep-alive>、<transition>、<transition-group>等組件

組件的實現是一個對象，注意它有一個屬性 abstract 為 true，表明是它一個抽象組件。

Vue 的文檔沒有提這個概念，在抽象組件的生命周期過程中，我們可以對包裹的子組件監聽的事件進行攔截，也可以對子組件進行 Dom 操作，從而可以對我們需要的功能進行封裝，而不需要關心子組件的具體實現。

<!-- more -->

下面實現一個 debounce 組件，對子組件的 click 事件進行攔截

核心代碼如下：

<script>
import {get, debounce, set} from 'loadsh';

export default {
  name: 'debounce',

  abstract: true, //標記為抽象組件

  render() {
    let vnode = this.$slots.default[0]; // 子組件的vnode
    if (vnode) {
      let event = get(vnode, `data.on.click`); // 子組件綁定的click事件
      if (typeof event === 'function') {
        set(vnode, `data.on.click`, debounce(event, 1000));
      }
    }
    return vnode;
  }
};
</script>

使用

<debounce>
  <button @click="clickHandler">測試</button>
</debounce>

可以看到，按鈕的 click 事件已經加上了去抖(debounce)操作。

我們可以進一步對 debounce 組件進行優化。

<script>
import {get, debounce, set} from '@/utils';

export default {
  name: 'debounce',

  abstract: true, //標記為抽象組件

  props: {
    events: String,
    wait: {
      type: Number,
      default: 0
    },
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },

  render() {
    let vnode = this.$slots.default[0]; // 子組件的vnode

    if (vnode && this.events) {
      let eventList = this.events.split(',');
      eventList.forEach(eventName => {
        let event = get(vnode, `data.on[${eventName}]`); // 子組件綁定的click事件
        if (typeof event === 'function') {
          /**
           * 加上debounce操作, 參數與 lodash 的debounce完全相同
           */
          set(vnode, `data.on[${eventName}]`, debounce(event, this.wait, this.options));
        }
      });
    }
    return vnode;
  }
};
</script>

使用

<debounce events="click" :wait="250" :options="{maxWait: 1000}">
  <button @click="clickHandler">測試</button>
</debounce>

我們同樣可以為輸入框的 input 事件進行 debouce 操作

<debounce events="input" :wait="250" :options="{maxWait: 1000}">
  <input @input="inputandler" placeholder="輸入關鍵字進行搜索" />
</debounce>

以上是“怎么用Vue編寫抽象組件”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！