vue子组件通过.sync修饰符修改props属性

在vue子组件中，如果我们直接修改props中的属性，会报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “val”

vue为我们提供了.sync修饰符来解决这个问题：

// 父组件中，通过.sync修改符绑定属性
<my-children :val.sync='val'></my-children>

// 子组件中，修改属性
<script>
export default {
  props: ['val'],
  methods: {
    myClick() {
      this.$emit('update:val', this.val + 1)
    }
  }
}
</script>