三个重要修饰符

.prevent 修饰符

阻止元素的默认事件

<a  href="https://www.baidu.com ">baidu</a>
   <a @click.prevent=""  href="https://www.baidu.com">baidu</a> 

.stop 修饰符

阻止冒泡传播事件： 当子元素和父元素都有事件时，触发子元素的事件也会触发父元素的事件，加上.stop 可以阻止触发父元素的事件。

   <div @click="father"> 爸爸
      <span @click="child">儿子</span>
    </div>
  </div>

 child(){
     alert("我是 children")
    },
    father(){
      alert("我是father")
    }

此时会弹出 children 的框后，点击确定会弹出 father 的框，在子元素加上.stop来阻止父元素的弹框。

<div @click="father"> 爸爸
      <span @click.stop="child">儿子</span>
    </div>
  </div>
 

.sync修饰符

如果子组件修改想要修改外部属性可以使用.sync来同步数据，.sync 和$emit是相配合的,假设 Father.vue组件使用 Child.vue。外部属性为 num。如果不使用.sync 我们是这样做的。

Child.vue点击按钮触发事件update:num，num-100是参数

<template>
<div>
<button @click="$emit('update:num',num-100)">点击</button>
</div>
</template>

Father.vue引用组件

<template>
  <div>
 <Child :num="account" v-on:update:num ="account=$event" />
  </div>
</template>

当我们使用.sync就可以改成下面,相当于上面的步骤

<template>
<div>
 <Child :num.sync="account" />
  </div>
</template>