Vant的Field组件插槽插入button后，@click后重复消费问题

问题描述

使用Vant做一个Field，点击Field的前面部分，触发catClicked，弹出Picker选择框；另外右侧使用插槽放置了一个按钮，也可以使用触发里面的addCatClicked方法。

代码如下：

<van-field
:value="cat"
@click="catClicked"
readonly
placeholder="请选择分类"
>
<template #button>
<van-button size="mini" icon="plus" type="info" @click="addCatClicked" style="background: #CBECFC;color:#0FAEFE;border:unset;padding: 0 4px;">添加分类</van-button>
</template>
</van-field>

会发现这样的问题，点了里面的添加分类Button后，最外面的catClicked也被触发了

解决办法

这是因为事件冒泡的原因，要阻止冒泡，我一开始使用了@click.prevent无效，正确的姿势是：@click.stop="addCatClicked"

button代码如下：

<van-button size="mini" icon="plus" type="info" @click.stop="addCatClicked" style="background: #CBECFC;color:#0FAEFE;border:unset;padding: 0 4px;">添加分类</van-button>