如何使用Vue 中的 .sync 修饰符

众所周知vue最大特点就是双向绑定，这样就可以做到属性更新，页面也随之更新，但是这个特点好用是好用，但是却不适合在父子组件之间，例如子组件无法更改prop，但是有时候，我们却不得不更改prop，怎么办呢？.sync修饰符就完美的解决了这个问题。

举个例子：父元素传一个值n给子元素，子元素点击一个n-100的按钮，怎样才能使得父元素的值n也随之更改？（子组件无法修改父组件的值，不使用引用）
解决思路：

1. 子元素通过$emit(‘update:n’, n - 100)触发事件update:n，并传参n-100
2. 父元素通过$event来获取 $emit传的参数n-100，监听传参变化，更改自身属性值n

//父组件
<template>
  <div id="app">
    Parent.vue : n现在的值为：{{ n }}
    <hr />
    //相当于<Child :n="n" v-on:update:n="n = $event" />
    <Child :n.sync="n" />
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      n: 10000,
    };
  },
  components: {
    Child,
  },
};
</script>
//子组件
<template>
  <div>
    Child.vue: 我要改父元素的值n: {{ n }}
    //触发update:n方法，将n-100传给父组件调用
    <button @click="$emit('update:n', n - 100)">n-100</button>
  </div>
</template>
<script>
export default {
  props: ["n"],
};
</script>