vue click修饰词示例 @click.stop @click.prevent @click.self

vue官方文档中对click修饰词的描述比较抽象 简单写了几个例子

@click.stop Dom子节点往根节点传播叫做冒泡 stop不让冒泡再进行下去

<div  @click="click1()" >
 <a @click.stop="click2()"></a>
</div>

export default {
  name: "Home",
  data() {
    return {}
    },
    methods{
       click1(){
           alert('div事件')
       },
       click2(){
          alert('div内a标签的事件')
       },
    }
  }

@click.prevent 阻止默认事件a跳转百度的发生，只执行自己定义的方法

<div id="app6">
  <a type="button" href="http://www.baidu.com" target="_blank" @click.prevent="click()">点我</a >
</div>
l

et app6 = new Vue({
  el:'#app6',
  data:{
  },
  methods:{
    click(){
      alert('按钮被点击')
    },
  }
});

@click.self 只当在 event.target 是当前元素自身时触发处理函数
加了self的点击方法 只有自己可以触发，子节点点击之后无法触发
没加self的点击方法 子节点点击之后，也会因为冒泡而触发

<style>
  .big{
    width: 200px;
    height: 100px;
    background: red;
  }
  .mid{
    width: 80px;
    height: 80px;
    background: yellow;
  }
  .small{
    width: 50px;
    height: 50px;
    background: green;
  }

</style>

 <div class="big" id="app" v-on:click.self="outer($event)">
<!--  <button >最外面的按钮</button>-->
  <div class="mid" @click="medium($event)">
<!--    <button @click="medium">中间的按钮</button>-->
    <div class="small" v-on:click.self="inner($event)">
    </div>
  </div>
</div>

let app = new Vue({
  el: '#app',

  // 在 `methods` 对象中定义方法
  methods: {
    outer: function (event) {
      alert("最外面的按钮被点了");
      console.log(event.currentTarget);

    },
    medium: function (event) {
      alert("中间的按钮被点了")
      console.log(event.currentTarget);

    },
    inner: function (event) {
      alert("里面的按钮被点了")
      console.log(event.currentTarget);

    },
  }
})

后续vue学习之后会继续更新一些官方文档中解释不清晰的地方，如果有什么疑问欢迎私信交流。