有办法给slot加事件吗

gunner
  • 384

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

调用组件

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

定义组件

<div>
   <slot></slot>
</div>
评论
阅读 8.1k
5 个回答

直接加在父级上就好了

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

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

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

定义:

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

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

微信图片_20200416173847.png

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

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

宣传栏