使用事件代理进行实现,可以在根标签中定义一个事件监听方法,当监听到img标签时执行方法,具体代码如下:

template

<template>
  <div class="l-header" @click="proxyImage">
        <slot name="left">
            <img id="left" slot="left" src="../../static/back.png" alt="">
        </slot>
  </div>
</template>

js

<script>
export default {
    methods: {
        proxyImage: function (e) {
            console.log(e.target)
            if (e.target.tagName.toUpperCase() === 'IMG') {
                // 这里是需要执行的方法
            }
        }
    }
}
</script>

上述方法可以实现功能,但在实际的开发中页面中往往存在多个相同名称的标签,容易产生冲突,解决方法是将想要绑定的标签加上Id属性,然后在proxyImage方法中将条件改为e.target.id === 'left'即可,注意left为自定义的id。

Logo

前往低代码交流专区

更多推荐