搞清楚Vue的这4个修饰符，提高开发效率

蘑菇放辣椒

2021-01-06 239 阅读1分钟

Vue提供给开发者很多个修饰符，今天来学一下常用的这几个修饰符。

学会了这几个修饰符大大滴提升开发效率。

@click.stop="xxx"
@click.prevent="xxx"
@keypress.enter="xxx"
:money.sync="total"

.stop修饰符

阻止事件传播
```
  <a @click.stop='xxx'></a>
```

.prevent修饰符

阻止默认动作
```
  <from @submit.prevent="xxx"></from>
```

.enter修饰符

键盘回车事件
```
  <input @keyup.enter="xxx"></input>
```

.sync修饰符

我们知道Vue的子组件修改了父组件传递过来的值是不被允许的。
你要想改，只能通过改父组件再渲染回子组件才可以。
也就出现了如下的写法：

  // 父组件给子组件传值，并监听子组件的修改
  // $event就是$emit传过来的参数
  <Child :money="total" v-on:updata:money="total = $event" />
  
  // 子组件修改父组件传递过来的total后通过$emit回调传给父组件，通知父组件修改
  {{money}}<button @click="$emit('update:money', money-100)">   <span>花钱</span></button>

上面父组件中的代码，可以被简写成下面的代码
```
  <Child :money.sync="total" />
```
如果使用了.sync请记得$emit中的第一个参数update是必须的

总结：

常用的四个修饰符