vue 事件委托

事件委托也叫事件代理，把绑定在子元素上的响应事件委托给父元素。原理是事件的冒泡
vue 的事件委托
事件绑定在父元素上，避免子元素渲染过多事件，影响性能

<template>
  <ul @click="onclick">
      <!-- data-* 自定义属性，通过 e.target.dataset 获取 -->
      <li class="home_item" v-for="(item,index) in list" :key="item.id" :data-index="index"></li>
  </ul>
</template>
<script>
export default {
  methods: {
      onclick(e){
          // 找到当前 target 属性
          let { target={} } = e
          // 通过 target 下的 dataset 获取 index
          let index = target.dataset.index
          // 也可以通过 getAttribute(data-index) 获取index
          let index = target.getAttribute("data-index")
          // 拿到item，可以传item，考虑到item可能过大，直接传会影响视图加载，所以只传index
          let item = this.list[index] 
      }
  }
}
</script>