Is there a way to add events to slot?

work experience for two years, this project has just figured out what"s going on with file uploading. It"s sad. Br > back to the point. Mobile project wants to write a vue file upload component
. Now there is a problem. Since the component must support different input content, slot
is used, but click events should be added to the content of this slot. Ask: how to solve
for example:

.

invoke component 

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

define components 

<div>
   <slot></slot>
</div>
Vue.js
Sep.27,2021

just add it directly to the parent 

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

bind to img

problems are different. Adding events to slot is within the component, one is in the parent component, and sometimes the parent component does not have data for the child component

definition: 

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

use: 

 <template -sharpitem="{ 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>

use the arrow function to parse it out where it is used and use it directly

_20200416173847.png

add it directly to slot, do not understand. Both of the above answers are fine.

then, do not understand your intention, if you use slot to undertake different content, different content may also have different response events, then it is better to add events directly to the receiving content.

Previous: How does beatuifulsoup get the value of an attribute?

Next: A problem about JS singleton pattern

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36235-2bfe7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36235-2bfe7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?