Vue中阻止table父元素冒泡的一些事件

在@click的后面加上.stop，即@click.stop=“doSomething”,可阻止单击事件冒泡

（1）阻止单击事件冒泡

<button @click.stop="doSomething"></button>

( 2 ) 让form提交事件不再重新加载页面

<form @submit.prevent="onSubmit"></form>

（3）修饰符串联的时候,用个a标签来看

 <a href="/#" @click.stop.prevent="doSomething"></a>

使用修饰符的时候修饰符顺序很重要的，

  <div @click="myfun1()">
    <a href="/#" @click="myfun2()">
         A标签
        <div @click="myfun3()">标签3</div>
    </a>
</div>

<script>
methods: {
        myfun1(){
            console.log('1111111111')
        }
        myfun2(){
            console.log('2222222222')
        }
        myfun3(){
            console.log('3333333333')
        }
}

</script>

常理我们点击**‘A标签’会打印出以下结果并跳转
‘2222222222’，
‘11111111111’
点击‘标签3’**会打印出如下结果并跳转
‘3333333333’，
‘2222222222’，
‘11111111111’，
如果我们添加修饰符.prevent.self之后的结果呢：

  <div @click="myfun1()">
    <a href="/#" @click.prevent.self="myfun2()">
         A标签
        <div @click="myfun3()">标签3</div>
    </a>
</div>

此时点击A标签打印出的是以下结果而且都没有跳转：
‘2222222222’
‘11111111111’
点击标签3打印出：
‘3333333333’，
‘11111111111’，
很显然加上.prevent.self后他阻止了自身的事件也阻止他人的事件。

那么我们再给修饰符的顺序换一下变成 .self.prevent,这下点击后又会发生什么呢：

  <div @click="myfun1()">
    <a href="/#" @click.self.prevent="myfun2()">
         A标签
        <div @click="myfun3()">标签3</div>
    </a>
</div>

这下点击A标签后打印出的是：
此时点击A标签会依次打印出出‘22222222’，‘1111111111’，没有跳转。点击标签3会依次弹出‘33333333’，‘1111111111’，并跳转。
此时大家都已经发现，这就是阻止对元素自身的点击。
反正是有点绕的，不过自己多测试几次就知道了