vue2.0中sync修饰符的使用

sync适用于组件之间的传值，当子组件想要修改父组件值的时候，最常用的写法就是使用自定义事件进行传参，但是使用sync就可以简化这一步操作，代码如下：
子组件：

<template>
  <div>
    <span>题目：{{ title }}</span>
    <hr />
    <button @click="changetitle">改变题目</button>
  </div>
</template>

<script>
export default {
  props: ["title"],
  methods: {
    changetitle() {
      this.$emit("update:title", "hello")
    },
  },
}
</script>

<style></style>

父组件：

<template>
  <div>
    <!-- 写法一： -->
    <!-- <child-p :title="pageTitle" @update:title="pageTitle = $event"></child-p> -->
    <!-- 写法二（简洁明了） -->
    <child-p :title.sync="pageTitle"></child-p>
  </div>
</template>

<script>
import ChildP from "../components/forP/forp.vue"
export default {
  created() {},
  data() {
    return {
      pageTitle: "你好",
    }
  },
  components: { ChildP },
}
</script>

<style></style>

当点击按钮之后就可以修改父组件传递过来的值了。