vue中子组件和父组件数据同步方案

自定义组件

子组件中实现对属性的封装，方便父组件一键调用

<templete>
	<div>{{ innerChildCompoentData }}</div>
</templete>

export default {
  name: 'ChildComponent',
  props: {
    childCompoentData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    childCompoentData: {
      handler(val) {
        this.innerChildCompoentData = val
      },
      deep: true
    },
    innerChildCompoentData: {
      handler(val) {
        this.$emit('update:childCompoentData', val)
      },
      deep: true,
      immediate: true
    }
  }
}

在父组件中，只需要sync调用即可实现属性双向绑定，不过这很可能不是最佳的解决方案，奈何网上的大佬都不太愿意分享，目前就这样实现。

<ChildComponent :childCompoentData.sync="parentData" />