Vue img标签绑定click事件

使用事件代理进行实现，可以在根标签中定义一个事件监听方法，当监听到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。