Vue事件修饰符详解

前端开发 作者: 2024-08-20 07:05:01
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下

(1) .stop修饰符

<template>
  <div class="about">
    <div @click="test1">
      <div @click="test2">
        测试
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    test1(){
      console.log('test1')
    },test2(){
      console.log('test2')
    }
  }
}
</script>
<template>
  <div class="about">
    <div @click="test1">
      <div @click.stop="test2">
        测试
      </div>
    </div>
  </div>
</template>

(2).prevent修饰符

<template>
  <div class="about">
    <a href="https://www.cnblogs.com/Jacob98/" @click="test2">跳转</a>
  </div>
</template>

<script>
export default {
  methods:{
    test2(){
      console.log('test2')
    }
  }
}
</script>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65383.html
Vue事件修饰符详解