vant checkbox 复选框 冒泡事件的处理 点击复选框不触发父元素的点击事件 常见的事件修饰符

在Vue中使用Vant的Checkbox组件时，如果你不想触发父元素的点击事件，可以使用.stop修饰符来阻止事件冒泡。

例如，假设你有以下父元素和子元素的模板代码：

<template>
  <div @click="parentClicked">
    Parent Element
    <van-checkbox v-model="checked" @click.stop="childClicked">Checkbox</van-checkbox>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { Checkbox } from 'vant';
 
export default {
  components: {
    [Checkbox.name]: Checkbox,
  },
  setup() {
    const checked = ref(false);
 
    const parentClicked = () => {
      console.log('Parent clicked');
    };
 
    const childClicked = () => {
      console.log('Checkbox clicked');
    };
 
    return {
      checked,
      parentClicked,
      childClicked,
    };
  },
};
</script>

在这个例子中，当你点击复选框时，childClicked方法会被调用，并且由于.stop修饰符的作用，不会触发外层<div>的parentClicked方法。这样，你就可以防止点击复选框时触发不必要的父元素事件。