vue中.prevent.self 和.self.prevent修饰符

prevent修饰符的作用

prevent修饰符阻止事件的默认行为

self修饰符的作用

self修饰符的写法,写在父组件上,阻止子组件向上冒泡,但是不会阻止父元素的默认,具体看最下面的代码案例,

    <div @click.self="doThis" class="list">
      self是写在父组件上的,这样能阻止子组件向上冒泡
      <div @click="handle(2)" class="list2">456</div>
    </div>
	
	  methods: {
    doThis() {
      console.log('doThi')
      alert('123')
    },
    handle(d) {
      console.log('handle')
      alert(d)
    }
  },


.list {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: block;
}
.list2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.prevent.self组合修饰符的作用

阻止了标签的默认事件和阻止了子元素事件的向上冒泡

.self.prevent组件修饰符的作用

阻止了子元素事件的向上冒泡,阻止了子组件冒泡事件的默认事件,

详细代码案例

<template>

  <div class="app-content">
    <!-- 
      1 代表 class为list的div标签,
      2 代表 a标签
      3 代表 class为div_in的div标签
      你需要把 a标签中的事件修饰符依次替换为下面的四种方案来查看区别,
      单独 .prevent 点击1 弹出 1
                    点击2 弹出 2 1 阻止了 a标签的 href跳转到百度也没
                    点击3 弹出 3 2 1  阻止了 a标签的 href跳转到百度也没
      单独 .self 点击1 弹出 1    
                 点击2 弹出 2 1  并前往百度页面
                 点击3 弹出 3 1  并执行了 2的前往百度页面
      .prevent.self 点击1 弹出 1
                    点击2 弹出 2 1 阻止了 2 的前往百度页面
                    点击3 弹出 3 1 阻止了 2 的前往百度页面 --- 主要看这个区别
      .self.prevent 点击1 弹出 1
                    点击2 弹出 2 1 阻止了 2 的前往百度页面
                    点击3 弹出 2 1 并执行了 2 的前往百度页面  ---主要看这个区别
     -->
    <div class="list" @click="handle(1)">
      <a href="https://www.baidu.com" @click.self.prevent="handle(2)"
        >a标签
        <div class="div_in" @click="handle(3)">div标签</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  mounted() {},
  created() {},
  methods: {
    doThis() {
      console.log('doThi')
      alert('123')
    },
    handle(d) {
      console.log('handle')
      alert(d)
    }
  },
  computed: {},
  watch: {}
}
</script>
<style lang="less" scoped>
.list {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: block;
}
.list2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
</style>