Vue中如何在子组件中阻止事件冒泡？

在vue中使用某些组件时,在父组件中绑定了点击事件,但是某些子组件组件又想阻止冒泡,肯呢个你会想到用@click.stop,但是有些时候这个也阻止不了,我们就需要用到@click.native.stop

@click.native是Vue中的一个修饰符，它被用于处理子组件的原生DOM事件，例如使用@click.native修饰符可以在组件中阻止事件冒泡，即阻止事件传递到组件的父级元素。

在Vue中，组件绑定的事件都是经过Vue处理过的虚拟DOM事件，而且父组件绑定的事件在子组件中默认情况下是不响应的，这是因为子组件不会产生原生的DOM事件。如果我们想要在子组件中处理原生DOM事件，就需要使用@click.native修饰符。

案例

<van-card
    v-for="(v2, i2) in v.foods"
    :key="i2"
    :price="v2.price"
    :desc="v2.goodsDesc"
    :title="v2.name"
    :thumb="v2.imgUrl"
    @click="details(v2)">  // 点击事件
    <template #tags>
        <van-tag type="success">特惠</van-tag>
    </template>
    <template #footer>
        <van-stepper
            v-model="v2.cartNum"
            theme="round"
            button-size="22"
            disable-input
            :max="100"
            :min="0"
            @change="changeCart"
            @click.native.stop  //阻止冒泡
        />
    </template>
</van-card>