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