vue技巧

qinsz 1/4/2024 vueweb

# 一、阻止点击事件向下传递

场景：如果上下两层组件都有点击事件，那么点击上层组件，点击事件会同样会传递到下层。实际项目中一般不希望传递这个点击事件。

1

在click属性上使用stop语法糖
点击child组件只会收到handleClickChild的响应

<div class="parent" @click="handleClickParent">
    <div class="child" @click.stop="handleClickChild">
    </div>
</div>

1
2
3
4

# 二、为临时为interface添加额外的属性

在CalculateResult基础上添加color属性

const calReactive = reactive<(CalculateResult & {color?: string})[]>([])

1