.stop 阻止事件冒泡
.prevent 阻止默认事件
.self 避免事件冒泡 (只有自身才能触发)
.once 只能触发一次
<template>
<div class="hello">
<!-- 阻止事件冒泡 -->
<p @click="paerts()">
父元素
<span @click.stop="sons()">子元素</span>
</p>
<!-- 阻止默认事件 -->
<a @click.prevent="sons()" href="baidu.com">链接</a>
<!-- 避免事件冒泡 (只有自身才能触发)-->
<p @click.self="paerts()">
父元素
<span @click="sons()">子元素</span>
</p>
<!-- 只能触发一次 -->
<button @click.once="paerts()">一次</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {},
methods: {
paerts() {
console.log("父元素方法");
},
sons() {
console.log("子元素方法");
}
}
};
</script>
