vue高級組件之節流組件

運用render 和 vm.$scopedSlots.default()

• vm.$scopedSlots.default()獲取插槽vnode
• 節流工廠函數能夠使用lodash庫的throttle的節流函數或者本身封裝一個
• **注意：**Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或經過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函

下面見代碼

<script>
import _ from 'lodash'
const throttle = function (fn, wait = 50, ctx) {
    let timer
    let lastCall = 0
    return function (...params) {
        const now = new Date().getTime()
        if (now - lastCall < wait) return
        lastCall = now
        fn.apply(ctx, params)
    }
}
export default {
    props: {
        time: Number,
        eventNameList: Array
    },
    abstract: true,
    data() {
        return {
            originMap: {},
            throttledMap:{}
        }
    },
    render (h) {
        let vnode = this.$scopedSlots.default()[0]; // 
        /// 全部的 $slots 如今都會做爲函數暴露在 $scopedSlots 中。若是你在使用渲染函數，不論當前插槽是否帶有做用域，咱們都推薦始終經過 $scopedSlots 訪問它們。這不單單使得在將來添加做用域變得簡單，也能夠讓你最終輕鬆遷移到全部插槽都是函數的 Vue 3。
        // let vnode = this.$slots.default[0];
        this.eventNameList.forEach(element => {
        let targetEvent = vnode.data.on[element] // 獲取插槽節點的事件
            if (targetEvent&& this.originMap[element]&&this.throttledMap[element]) {
                vnode.data.on[element] = this.throttledMap[element]
            } else if(targetEvent) {
                this.originMap[element] = targetEvent;
                this.throttledMap[element] = _.throttle(targetEvent,this.time);
                vnode.data.on[element] = _.throttle(targetEvent,this.time);
            }
        });
        return vnode;
    }
}
</script>

• 使用案例,節流2秒內的點擊

  import throttle from './throttle'
  <throttle :time='2000' :eventNameList="eventNameList">
      <button @click='clickSolt'>點擊</button>
      </throttle>