vue中巧用事件委托

项目中遇到大量的button需要添加同一个@click事件，如果给每一个button都添加@click事件，这么多的监听从性能上来说是不太好的，所以后来改进了一下，我们使用js的事件委托机制，实现如下：

    <div class="rightBtn" @click="filterAnimal($event)">
      <div class="Icon right80" style="top:200px;">
        <span class='IconDuck' data-index="秋沙鸭"></span>
        <span class="IconTextEven">秋沙鸭</span>
      </div>
      <div class="Icon right50" style="top:265px;">
        <span class='IconSheep' data-index="盘羊"></span>
        <span class="IconTextOdd">盘羊</span>
      </div>
      <div class="Icon right80" style="top:330px;">
        <span class='IconLin' data-index="藏原羚"></span>
        <span class="IconTextEven">藏原羚</span>
      </div>
    ...
    </div>

<script> 
...
    filterAnimal(e){
      let dom = e.target;
      let index = dom.getAttribute("data-index");
      console.dir(index);
    },
...
</script> 

通过e.target获取当前点击的元素之后，获取data-index参数的值，既可知道点击的是哪个button了。