粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

一、.sync修饰符

假设有以下场景，爸爸给儿子钱，儿子要花钱：

爸爸和儿子通过属性 ‘money’ 来沟通

// 儿子的Props里有money
<script>
export default {
  props: ["money"]
};
</script>

爸爸：
<template>
  <div class="app">
    // 绑定儿子的money属性
    <Child :money="total"  />
  </div>
</template>

<script>
      // 引入儿子组件
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

第一步

儿子触发一个要花钱的事件，然后告诉爸爸花完之后剩多少，这里假设儿子每次花100元

//儿子
<button [@click](/user/click)="$emit('update:money', money - 100)">
      <span>花钱</span>
</button>

核心代码是

$emit('update:money', money - 100)

儿子用$emit触发"update:money"事件，并且告诉爸爸，钱花了还剩下Money-100

注意：子组件不能直接修改Props的值，只能由父组件修改

第二步：

爸爸用v-on:‘update:money’ 监听 update:money事件，并用$event拿到参数

<Child :money="total" v-on:update:money="total = $event"  />

由于以上两步操作非常麻烦，于是就有了.sync语法糖

用法是直接在 :money 后加一个.sync修饰符

父组件：
<Child :money.sync="total" />

这一句代码就代替了以下这句代码：

父组件
<Child :money="total" v-on:update:money="total = $event"  />

小结：

<Child :money.sync="total" /> 等价于绑定属性+监听事件+更新属性

二、事件修饰符

.stop

由于冒泡机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件

<div [@click](/user/click)="shout(2)">
  <button [@click](/user/click)="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

@click.stop 可以一键阻止冒泡，相当于调用了event.stopPropagation()方法。

<div [@click](/user/click)="shout(2)">
  <button [@click](/user/click).stop="shout(1)">ok</button>
</div>
//只输出1

.prevent

用于阻止事件的默认行为，相当于写event.preventDefault()

例如，当点击提交按钮时阻止对表单的提交。

阻止点击a标签时跳转链接

//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 点击a标签不会跳转链接
<a [@click](/user/click).prevent href="baidu.com"></a>

三、键值修饰符

<input type="text" @keypress.enter="xxx">

当用户在键盘敲下enter回车键时，会触发xxx事件