委托事件
简单来说就是用父类元素进行绑定事件处理，通过将参赛绑定到子属性上进行事件交互
先看看原始方法
<template>
<div>
<ul >
<li v-for="item in list" :key="item.value" @click="handleClick(item)">
</li>
</ul>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class layout extends Vue {
list = [
{
text: '1',
value: 'y',
},
{
text: '2',
value: 'z',
},
{
text: '3',
value: 'q',
},
];
handleClick(item: any) {
console.log(item);
// { text: 1 , value: y};
}
}
</script>
委托事件写法
<template>
<div class="l-home">
<ul @click="handleClick">
<li v-for="item in list" :key="item.value" :hhh="item.value">
</li>
</ul>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class layout extends Vue {
list = [
{
text: '1',
value: 'y',
},
{
text: '2',
value: 'z',
},
{
text: '3',
value: 'q',
},
];
handleClick(e: Event) {
console.log(e.target.getAttribute('hhh'));
// console.log(e.target);
}
}
</script>
