vue中阻止@click事件冒泡

最新推荐文章于 2024-09-18 10:10:00 发布

初来乍到到

最新推荐文章于 2024-09-18 10:10:00 发布

阅读量2.4w

点赞数 1

分类专栏： Vue 文章标签： vue阻止冒泡 vue点击事件

本文链接：https://blog.csdn.net/weixin_43868692/article/details/90605505

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <title>rem 使用</title>
  <script src="vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div class="box">
    <el-button class="Procedure-btn" type="primary" @click="selectProcedure()">
      <i @click.stop="deleteFlow()" class="el-icon-delete"></i>点击
    </el-button>
  </div>
</body>
<script>
  const app = new Vue({
    el: '.box',
    methods: {
      selectProcedure() {
        console.log('点击了按钮')
      },
      deleteFlow() {
        console.log('点击删除图标')
      }
    }
  })
</script>
</html>

如果我们不使用.stop的话，当点击图标的时候就会执行两个点击事件.

vue官方事件阻止方法https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6