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){
          let { path=[] } = e
          // 点击的target 可能是li的子元素，拿不到data-index，所以通过path数组获取home_item的元素
          let targetEl = path.find(el => el.className == 'home_item')
          // 也可以通过 getAttribute(data-index) 获取index
          let { index=0 } = targetEl.dataset
          // 拿到item，可以传item，考虑到item可能过大，直接传会影响视图加载，所以只传index
          let item = this.list[index] 
      }
  }
}
</script>