vue中@click與它的事件修飾符@click.stop、@click.prevent

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