例如选项卡切换之类的,父元素有多个子元素,每个子元素都绑定一个事件,那造成的性能浪费就很多了,基于事件冒泡的原理,在父元素上绑定一个事件,就可以达到一样的效果。
<view class="mod2" @click="changNav">
<view class="mod2-item" v-for="(item,index) in navList" :key="item.id" :data-index="index">
<text :data-index="index">{{item.name}}</text>
</view>
</view>
<script>
export default {
methods: {
changNav(e) {
//可以拿到点击元素的索引,根据这个就可以进行相对应的操作了
let {index} = e.target.dataset
}
}
}
</script>