vue中子组件触发$emit如何传参的同时还传事件元素e问题解决

场景

• 我遇到的场景可能比较特殊，不一定具有普适性，请先理解我的场景是否符合你的场景
• 父级传一个list给子组件
• 子组件用这个list，for渲染，绑定事件和数据，事件除了要传递数据如id，还需要传递e给父级
• 但是在绑定事件中，e是默认参数，如果传了其他参数，e就会被覆盖，那么怎么才能二者同时传呢？

解决

• 一开始想到的是用dataset绑要传的数据，不在事件入口处传，然后再事件函数里获取dataset，大致情况如下：这里的item已经是for里的一个片段了

  <a-select
    allowClear
    :data-test="item.id"
    @popupScroll="extraEvent"
  >
    <a-select-option v-for="option in item.options" :value="option.value" :key="option.index">{{ option.name }}</a-select-option>
  </a-select>
  

  // 可以看到，我这里是绑了一个下拉框的滚动事件，这里是写了一个懒加载，滚动加载后面的更多数据，所以父级才需要拿到e.target来判断滚动
  // 然后就是在extraEvent方法中获取data-test
  extraEvent(e){
    const test = e.target.dataset.test
    this.$emit('event', e, test)
  }
  

• 但是其实，经历过的朋友可能已经发现了，这里失败了，因为我用了antdv，这里的data-set并没有绑定到e.target上面去，而是绑到了它的某个父级上去，虽然思路还是能走通，但是挺麻烦的
• 换个思路吧，后来想到了柯里化，但是柯里化的作用是降参，我这里其实是升参，从一个参数变成两个参数，怎么实现反柯里化呢？不就是给函数升级，多传一次参吗？思路有了，来试吧。
• 我也忘了自己试了多少种写法，直接记录最终版吧：

  <a-select
    allowClear
    @popupScroll="(e) => { extraEvent(e, item.id) }"
  >
    <a-select-option v-for="option in item.options" :value="option.value" :key="option.index">{{ option.name }}</a-select-option>
  </a-select>
  

  extraEvent (e, id) {
    this.$emit('event', e, id)
  },
  

• 所以其实就是在绑定事件里写了个匿名函数，听简单的，主要是想到这个点

标签：传参,vue,父级,绑定,extraEvent,id,事件,test,emit
来源： https://www.cnblogs.com/mizuki-vone/p/16457329.html