修饰符

用于指出一个指令应该以特殊方式绑定
目前可支持修饰符的常见3个指令：
v-on、v-bind、v-model
目前掌握常用4个修饰符：
@click.stop = "xxx"阻止冒泡机制
@click.prevent = "xxx"阻止默认动作，常用于表单
@keypress.enter = "xxx"键盘事件触发则调用xxx函数
:msg.sync = "xxx" 父子组件双向绑定，父组件监听子组件触发的事件并获取参数

.sync修饰符

sync修饰符是一个语法糖
主要是解决了父子组件的双向绑定问题，这是通过数据劫持（Object.defineProperty()通过 getter和setter 方法）结合发布者-订阅者模式（Vue内置了eventBus，即this.$emit）的方式来实现的

背景：

真正的双向绑定会带来维护上的问题，因为子组件可以随意变更父组件，且在父组件和子组件两侧都没有明显的变更来源，故Vue提倡单向数据流动，然而有些情况我们仍需要对一个 prop 进行“双向绑定”以满足业务需求

Vue规定：
子组件不允直接修改props父组件的数据，若需要实现“双向绑定”，则
需要：子组件使用$emit触发事件并传参
子组件中：this.$emit('update:Mypredata', newdata)
然后：父组件监听子组件事件并利用$event获取$emit的参数
如果事件触发，就将newdata存到变量$event，再把变量$event传给父组件，
父组件中：:msg ="" v-on:update:Mypredate="msg = $event"

.sync修饰符的应用：

以上场景很常见，但父组件描述冗长，故简化之，产生了.sync修饰符：
父组件中缩写为 ：
<Child:外部参数.sync="本地参数" （此处Child 为 import 引入的外部组件）
举例：
<Child :son.sync="daddy" />
son是Child组件被监听的参数，daddy 是本地需要进行改变的参数
作用：
.sync 会被扩展为一个自动更新父组件属性的 v-on 监听器，通过子组件的 $emit() 配合，时时更新本地参数

源码：

//Parent.vue 父组件中：

<template>
  <div class="app">
    Parent.vue 我现在有 {{total}}元
    <hr>
                                 //监听Child.vue文件的 useMoney（update:money） 事件，
                                                              //$event 可以获取 $emit 的参数,从而进行更新
    <Child :money ="total" v-on:update:money ="total = $event"/> 
  </div>
</template>
<script>
import Child from "./Child.vue";   //引用Child.vue文件
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }  //声明一个子组件Child
};
</script>
<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

//Child.vue 子组件中：

<template>
  <div class="child">
    {{money}}元               //当子组件更新了money的值时，它会调用$emit触发一个更新事件：
    <button @click="$emit('update:money', money-100)">
                //子组件使用$emit触发usemoney（update:money）事件并传参（money-100表达式得出的值）
      <span>花钱</span>
    </button>
  </div>
</template>
<script>
export default {
  props: ["money"]
};
</script>
<style>
.child {
  border: 3px solid green;
}
</style>

小结：
等价于：绑定属性（传给子组件的props）+监听事件+更新属性

.sync修饰符和v-model指令的关系

两种不同的方式双向绑定
https://zhuanlan.zhihu.com/p/338392152