转载说明：原创不易，未经授权，谢绝任何形式的转载

有时，我们希望在点击一个包含按钮的元素时，防止点击事件冒泡到父元素。

本文将介绍如何在Vue.js中防止点击按钮时点击事件冒泡到父级元素。

当在Vue.js中点击一个包含按钮的元素时，我们可以使用self修饰符来防止点击事件冒泡到父元素。

例如，我们可以这样写：

<template>
  <div id="app">
    <div class="parent" @click.self="showAlert('parent clicked')">
      <span class="child" @click="showAlert('child1 clicked')">Child1</span>
      <span class="child" @click="showAlert('child2 clicked')">Child2</span>
      <span class="child" @click="showAlert('child3 clicked')">Child3</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    showAlert(str) {
      alert(str);
    },
  },
};
</script>
<style scoped>
.parent {
  padding: 20px;
}
</style>

我们在外部div元素上添加self修饰符，这样点击事件就只会限定在父级div中。

当我们点击每个div或span元素时，将会运行showAlert方法。

结束

我们可以使用self修饰符来防止在Vue.js中点击一个包含按钮的元素时，点击事件冒泡到父元素。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。