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