Vue 中的 .sync 修饰符作用

功能：父组件传数据给子组件，子组件改prop值并通知父组件

1、无.sync实现方法

子组件

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

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

父组件

<template>
  <div id="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money ="total = $event" />
  </div>
<template>  

2、有.sync修饰符实现方法

父组件

<template>
  <div id="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total" />
  </div>
</template>

子组件

不变

3、修饰符sync小结

3.1 功能

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

3.2 缩写

:money.sync="total" 等价于 :money="total" v-on:update:money ="total = $event"

3.3 是一个语法糖

---