@click.stop ：阻止事件冒泡

<template>
  <div @click="outside">
    <el-button @click="inside">按钮</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    outside() {
      alert("点击div");
    },
    inside() {
      alert("点击按钮");
    }
  },
};
</script>

结果：先弹出“点击按钮”，再弹出“点击div”

                        

 

<template>
  <div @click="outside">
    <el-button @click.stop="inside">按钮</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    outside() {
      alert("点击div");
    },
    inside() {
      alert("点击按钮");
    }
  },
};
</script>

结果：只弹出“点击按钮”

 

 

@click.prevent ：阻止事件的默认行为

有些标签属性自带了事件，但我们有时并不需要那些事件，因此就需要阻止默认事件，只执行我们绑定的事件

<a href="http://www.baidu.com" @click.prevent="search">百度一下</a>   //阻止a标签跳转，仅执行函数search

<form action="/xxx" @submit.prevent="updata">
    <input type="submit" value="注册" />        //阻止表单提交，仅执行函数updata
</form>