账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    一个页面包含多个同一组件,子组件监听的resize事件经过防抖处理,只能触发一个组件
    26
    0
    情况是这样的,我的子组件是一个table表格,在内部需要监听resize来计算表格高度,然后一个页面有时会有多个表格。在子组件table中我用了lodash的debounce方法去处理了计算表格高度的方法,定义为handleResize。然后测试时发现,防抖处理后,只会执行一个子组件实例的方法.窗口大小发生变化时,怎么样才能让每个子组件在最后一次窗口变化时都能成功的触发我的事件呢子组件table.vue:<template> <p>table</p></template><script> import _ from "lodash" export default { name: "table", beforeDestroy() { window.removeEventListener("resize", this.handleResize, true); }, created() { console.log("created uid:", this._uid); window.addEventListener("resize", this.handleResize, true); }, methods: { handleResize: _.debounce(function () { //this.calcTableHeight() //根据情况计算表格高度 console.log("handleResize uid: ", this._uid) }, 200), } }</script>父页面page.vue<template> <table></table> <table></table></template><script>import table from "./table.vue";export default { name: "page", components: { table }}</script>然后,鼠标调整窗口大小以触发window的resize事件,测试结果如下:table.vue?6c75:13 created uid: 10table.vue?6c75:13 created uid: 11table.vue?6c75:18 handleResize uid: 11
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 冷℃忧伤 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部