vue中checkbox组件的@change事件触发父组件的冒泡事件

          <ListItem @click="showModal(item)">
            <ListItemMeta>
              <template #title>
                <span @click.stop>
                  <Checkbox v-model="item.checked" @change="change(item)" />
                </span>
                <a-button class="ml-2" type="link">{{ item.title }}</a-button>
                <!-- </Badge> -->
              </template>
              <template #description>
                <div class="zw_content" v-html="item.zw"></div>
                <span style="color: #222">发送人:{{ item.name }}</span>
                <span class="pl-2" style="color: #222">接收时间:{{ item.time }}</span>
              </template>
            </ListItemMeta>
          </ListItem>```

在这个代码中checkbox的change事件会触发最顶层的ListItem的点击事件，为了阻止事件冒泡，但是给@change加.stop是不生效的，所以解决思路是给checkbox加一个小的父组件，由此checkbox的@change事件会先出发父组件span的点击事件，然后给span的点击事件加上.stop就成功阻止了顶层的事件冒泡