vue高级组件之节流组件

2019独角兽企业重金招聘Python工程师标准>>>

运用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>
  

转载于:https://my.oschina.net/u/3407699/blog/3049122