待劫持的组件

  1. <template>
  2.   <button @click="handleClick">
  3.     <slot></slot>
  4.   </button>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'XButton',
  10.   methods: {
  11.     handleClick (event) {
  12.       this.$emit('click', event)
  13.     }
  14.   }
  15. }
  16. </script>
  18. <style scoped>
  20. </style>

劫持的逻辑

  1. import xButton from '../components/button'
  3. // 防抖函数
  4. function debounce (func, delay, context, args) {
  5.   clearTimeout(func.timer)
  6.   func.timer = setTimeout(function () {
  7.     func.call(context, ...args)
  8.   }, delay)
  9. }
  11. function proxy (func) {
  12.   return function () {
  13.     console.log('debounce')
  14.     debounce(func, 300, this, arguments)
  15.   }
  16. }
  18. // 导出新组件
  19. export default {
  20.   functional: true,
  21.   render (h, context) {
  22.     context.listeners.click = proxy(context.listeners.click)
  23.     return h(xButton, context.data, context.children)
  24.   }
  25. }