@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>