阻止冒泡事件

一般冒泡Vue行为即可用stop解决，如下

<div id="box">
    <div @click="show2()">
        <input type="button" value="按钮" @click.stop="show()">
    </div>
</div>

阻止事件默认行为：

<div id="box">
    <input type="button" value="按钮" @contextmenu.prevent="show()">
</div>

但是今天我不是要说这，而是最近项目中遇到一个问题input进步器 change事件，如下

<div slot="title" class="titleDiv" style="display: flex;align-items: center;">
                  <van-icon name="passed" :color="i.check===false?'#ccc':'#f00'" :id="i.id" @click="indexSelect" />
                  <van-card
                    :title="i.name"
                    :desc="i.author"
                    :price="formatPrice(i.price)"
                    :thumb="i.picurl"
        
                  >
                    <!--:thumb-link="'/#' + /detailsPage/ + i.pid"-->
                    <div slot="footer" :id="i.id">
                      <van-stepper v-model="i.num" :min="0" :id="i.id" @change="numchange(i.num, i.id)"/>
                    </div>
                  </van-card>

是vant框架里写的购物车 之前是正常的，stepper正常加减数量，但是现在要添加在商品一行点击进入详情页，于是就在card标签中共添加一个@click=“jumpDetailPage(i.pid)” ；那么问题啊来了，change事件会受click的影响，这时候我首先想到stop阻止冒泡事件发生，但是会提示 change.stop报错，不知道怎么搞
最后想到用原生阻止事件发生 于是我就在事件里添加 原生事件event.stopPropagation();即可完美解决

numchange(num,id) {
          event.stopPropagation();//原生阻止冒泡事件
          console.log('数量' + num)
          console.log('购物车id' + id)
          ...
          }