vue .sync 修饰符对对象进行双向绑定

首先我们先看下 官方文档 的描述：

注意：此处的v-bind不能省略，即不可以写成.sync=“doc”。
下图为父组件中对应的写法：

<template>
  <div class="hello">
    <h1>a:{{ syncObj.a }}</h1>
    <h1>b:{{ syncObj.b }}</h1>
    <secondCom v-bind.sync="syncObj" />
  </div>
</template>

<script>
import secondCom from './secondCom.vue'
export default {
  name: 'HelloWorld',
  components: { secondCom },
  data() {
    return {
      syncObj:{
        a:'1',
        b:'2',
      },
    }
  },
}
</script>

子组件：

<template>
  <div>
    <div @click="$emit('update:a',5)">{{a}}aaa</div>
    <div @click="$emit('update:b',6)">{{b}}bbb</div>
  </div>
</template>
<script>
export default {
  props: {
    a:[String,Number],
    b:[String,Number],
  },
}
</script>

另外，其实不在子组件中定义props也可以，只要通过$attrs.a、 $attrs.b获取即可，不会影响$emit的使用。