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