.sync 修饰符

用于对一个 prop 进行“双向绑定”的情境中。是一个语法糖

这里说的双向绑定并不是真的双向绑定。真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。Vue为了避免这样的情况发生，以 update:myPropName 的模式触发事件取而代之。

需要触发事件时，Vue 用 $emit来触发意图。

举个例子，在一个包含 title prop 的假设的组件中，可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document 
v-bind:title="doc.title" 
v-on:update:title="doc.title = $event">
</text-document>

为了方便起见，Vue为这种模式提供一个缩写，即 .sync 修饰符：

<text-document v-bind:title.sync="doc.title"></text-document>

示例：（假设有以下场景，爸爸给儿子钱，儿子要花钱。爸爸和儿子通过属性 ‘money’ 来沟通）

//Child.vue


<template>
  <div class="Child">
    {{ money }}
    <button @click="$emit('update:money',money-100)"><soan>花钱</span></button>
  </div>
</template>

<script>
export default{
    props:["money"]
}
</script>

<sstyle>
.child{
    border: 3px solid green;
}
</style>

这里假设儿子每次花100元。触发一个要花钱的事件，然后告诉爸爸剩多少钱。
儿子用$emit触发"update:money"事件，并且告诉爸爸，钱花了还剩下Money-100。{{money}}展示剩下的钱数。
核心代码： $emit('update:money',money-100)

//App.vue


<template>
  <div class="app">
    App.vue 我现在有 {{ total }}
    <hr />
    <Child:money.sync ="total" />
    <!-- .sync 在这就相当于下面这句 -->
    <!-- <Child:money ="total" v-on:updata:money="tatal = $event" /> -->
  </div>
</template>

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

<style>
.app {
  border: 1px solid red;
  padding: 10px;
}
</style>

爸爸用v-on:updata:money="tatal = $event" 监听 update:money 事件，并用$event拿到参数。
用.sync语法糖：<Child:money ="total" v-on:updata:money="tatal = $event" />就可以写成<Child:money.sync ="total" />

事件修饰符

.stop

阻止事件传播/冒泡

示例：

// 阻止单击事件继续传播 
<a v-on:click.stop="doThis"></a>

.prevent

阻止默认事件

示例一：当点击提交按钮时阻止对表单的提交

//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>

示例二：阻止a标签跳转链接

// 点击a标签不会跳转链接
<a @click.prevent href="baidu.com"></a>

备注： v-on:可简写成 @

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

示例：@keypress.enter

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

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

Vue2 - 修饰符

.sync 修饰符

事件修饰符

.stop

.prevent

按键修饰符