有办法给slot加事件吗

Question

工作经验两年了，这次项目刚搞懂文件上传怎么回事，好可悲，呜呜
回到正题，移动端项目，想自己写一个vue的文件上传组件
现在碰到一个问题，既然是组件可定要支持传入不同的内容，所以用了slot
但点击事件要加在这个插槽的内容上，请教：如何解决
例如：

调用组件

<my-upload>
    <img src='./xxxx.png'/>
</my-upload>

定义组件

<div>
   <slot></slot>
</div>

Answer 1

直接加在父级上就好了

<div @click="onClick">
   <slot></slot>
</div>

Answer 2

<img src='./xxxx.png' @click="upload"/>绑定到img上就可以

Answer 3

问题不一样的，在slot上加事件，是在组件内，一个是在父组件，有时候父组件没有子组件的数据

Answer 4

定义：

  <slot
            name="item"
            :item="item"
            :selectKeysObject="selectKeysObject"
            :onCheck="() => onSelect({ id: item[sourceId], item })"
          ></slot>

使用：

 <template #item="{ item, selectKeysObject, onCheck }">
          <div :class="$style.list">
            <div :class="$style.check" @click="onCheck">
              <simple-checkbox :checked="Boolean(selectKeysObject[item.sourceId])"></simple-checkbox>
            </div>
            <div :class="$style.img">
              <loading-image :url="item.sceneImg" />
            </div>
            <div>{{ item.absTimestamp }}</div>
            <div :class="$style.deviceName" :title="item.deviceName">{{ item.deviceName }}</div>
          </div>
        </template>

利用箭头函数，在使用的地方解析出来直接使用

Answer 5

直接在slot上加，不了解……上边两个回答都可以。

然后，不明白你的意图，如果用slot承接不同的内容，不同内容也可能会有不同的响应事件，那不如直接在承接的内容上加事件...