美文网首页
vue事件代理

vue事件代理

作者: 幽小鬼 | 来源:发表于2022-05-10 19:20 被阅读0次

一般使用 v-for遍历数组然后给每个子元素绑定onClick方法然后传入下标:

<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" :key="index" @click="onClick(index)">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'tips1', // vue事件代理
    data () {
        return {
            list: ['项目1', '项目2', '项目3']
        }
    },
    methods: {
        onClick (index) {
            console.log(index)
        }
    }
}
</script>

但如果列表很长需要渲染的元素很多,在每一个子元素上都绑定onClick方法会消耗性能。

可以使用事件代理,只在父元素上绑定onClick方法,在子元素上绑定自定义属性data-index,赋值下标,当点击子元素时,父元素的点击事件捕获子元素的点击事件,然后在点击事件的回调函数中使用e.target.getAttribute('data-index'),来获取绑定在自定义属性data-index上的下标:

<template>
    <div @click="onClick">
        <ul>
            <li v-for="(item, index) in list" :key="index" :data-index="index">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'tips1', // vue事件代理
    data () {
        return {
            list: ['项目1', '项目2', '项目3']
        }
    },
    methods: {
        onClick (e) {
            const index = e.target.getAttribute('data-index')
            console.log(index)
        }
    }
}
</script>

相关文章

网友评论

      本文标题:vue事件代理

      本文链接:https://www.haomeiwen.com/subject/aqtrurtx.html