【Vue】阻止组件中的change事件冒泡

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

在Vue中，如果想阻止点击事件冒泡，可以直接使用 .stop 修饰符即可

<div @click="divClick">
    <button @click.stop="btnClick">按钮</button>
</div>

像上面这样，点击按钮时就不会触发到父元素的 divClick 事件。

想要阻止事件的默认行为则可以使用 .prevent 修饰符

<a href="http://www.baidu.com" @click.prevent="aClick">点击不跳转</>

像上面这样，点击a标签的时候就不会跳转到 href 属性指向的网址了。

但是上面的都是在针对元素的 click 事件的，在实际开发中，我们使用的组件库中的组件除了 click 事件还会有很多其他事件，比如说 change 事件。

假设一个场景，要实现一个购物车的功能，购物车中的商品可以点击选中，也可以增减数量，这里使用的是vant组件库，实现代码如下：

<van-checkbox-group
    v-model="shoppingCartCheckedList"
    @change="checkboxGroupChange">
  <template v-for="goods in shoppingCartList">
    <van-checkbox :key="goods.id" :name="goods.skuId">
      <van-card
          :desc="goods.seoModel"
          :price="goods.price"
          :thumb="goods.imagePath"
          :title="goods.name"
      >
        <template #num>
          <van-stepper
              v-model="goods.num"
              theme="round"
              @change="stepperChange"
          />
        </template>
      </van-card>
    </van-checkbox>
  </template>
</van-checkbox-group>

在上面的代码中，点击步进器的加减按钮时会触发 van-stepper 的 change 事件，同时也会触发 van-checkbox-group 的 change 事件，导致商品被添加进到选中列表。

这样的逻辑很明显是不对的，当我们试着给 van-stepper 的 change 事件加上 .stop 修饰符时，发现并未起到阻止冒泡的作用，van-checkbox-group 的 change 事件还是执行了。

<van-stepper
    v-model="goods.num"
    theme="round"
    @change.stop="stepperChange"
/>

这个时候，我们可以通过使用原生事件 event.stopPropagation() 来解决这个问题。

stepperChange() {
  event.stopPropagation();  // 阻止事件冒泡
  console.log('步进器change事件触发');
}

像上面这样在方法中加入一行代码，就可以了。