Vue中@click.stop和@click.prevent实例详解

<div class='handle-box' @click="clickBox">
		<div @click="handleClick('新增')"><text>新增</text></div>
		<div @click="handleClick('修改')"><text>修改</text></div>
		<div @click="handleClick('删除')"><text>删除</text></div>
</div>

<div class='handle-box' @click="clickBox">
		<div @click.stop="handleClick('新增')"><text>新增</text></div>
		<div @click.stop="handleClick('修改')"><text>修改</text></div>
		<div @click.stop="handleClick('删除')"><text>删除</text></div>
</div>

<div>
	<a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  target='_blank'>百度</a>
</div>

<div>
	<a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"   target='_blank' @click.prevent='handleClick('修改')'>百度</a>
</div>

<template>
  <div @click="fun">
    <div @click.stop>
      <!--子div-->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      // 点击父div时执行的功能
      console.log('单击了父div');
    },
  },
}
</script>

<template>
  <div @click="doSomething">
    <button @click.stop="doSomethingElse">不会触发父级元素的点击事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log('doSomething')
    },
    doSomethingElse() {
      console.log('doSomethingElse')
    }
  }
}
</script>