Vue中的修饰符.sync

在子组件中展示了父组件中传过来的值，想要子组件中的传入的值改变，可以在子组件中设置一个事件，在父组件中绑定该事件，$event是子组件中改变之后的值

import App from  "./app.vue"
import Child from "./Child.vue"
const vm = new Vue({
   el:'#app',
   components:{Child:Child},
   render:h=>h(App)
})

//父组件
<template>
  <div>
    App:vue {{ n }}
    <hr />
    Demo.vue : <Child  :money.sync='n' />   //  解释在下面1.
  </div>
</template>

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

<style>
</style>

1. 在父组件中将值传给子组件，将子组件设置的事件进行绑定，v-on:update:money=" n= $event" $event是子组件中改变之后的值，这句话可以省略，在父组件中原本传入值的语句 :money='n' 增加修饰符.sync即可。这样看来相当于语法糖的写法。
2. 在子组件中通过订阅发布系统，设置事件，操作父组件中传入的值。

//子组件
<template>
    <div>
    {{money}}
    <button @click='$emit("update:money",money-100)' ><span>花钱啊</span></button> // 解释在上面2.
    </div>
</template>

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

<style>

</style>