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であることに注意する.