【Vue笔记】父子通讯中的sync想在在父子组件中实现数据的 sync ，需要借助计算属性 computed 的读写方

想在在父子组件中实现数据的 sync ，需要借助计算属性 computed 和 update: 修饰。实例如下：

子组件：

<template>
  <div>
    {{ printData }}
  </div>
</template>

<script>
export default {
  props: { // 通讯数据的传输
    data: {
      type: String,
      default: ''
    }
  },
  computed: { // 借助计算属性的2个方法实现 sync
    printData: {
      get() { // 读
        return this.data
      },
      set(val) { // 写
        this.$emit('update:data', val)
      }
    }
  }
}
</script>

父组件调用子组件：

<template>
  <child-node
    :data.sync="data"          
  ></child-node>
</template>

<script>
import ...
export default {
  components: { // 通讯数据的传输
    childNode
  },
  data() {
    return {
      data: '父子传输内容'
    }
  }
}
</script>

笔记主要为自用，欢迎友好交流！