欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用Vue編寫抽象組件的方法

 更新時(shí)間：2019年05月06日 14:51:12   作者：xm726  
這篇文章主要介紹了用Vue編寫抽象組件的方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

組件的實(shí)現(xiàn)是一個(gè)對象，注意它有一個(gè)屬性 abstract 為 true，表明是它一個(gè)抽象組件。

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

<!-- more -->

下面實(shí)現(xiàn)一個(gè) debounce 組件，對子組件的 click 事件進(jìn)行攔截

核心代碼如下：

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

export default {
  name: 'debounce',

  abstract: true, //標(biāo)記為抽象組件

  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 事件已經(jīng)加上了去抖(debounce)操作。

我們可以進(jìn)一步對 debounce 組件進(jìn)行優(yōu)化。

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

export default {
  name: 'debounce',

  abstract: true, //標(biāo)記為抽象組件

  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操作, 參數(shù)與 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 事件進(jìn)行 debouce 操作

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

最新評論