vue子组件通过获取父组件的值使用计算属性存储值改变

当我们父组件传来的值

props: {
    data: {
      type: Object,
      default: () => {},
    },
  },

如果我们在子组件里面去用这个值去显示是完全没问题的,但是如果我们在子组件里面去修改这个值,控制台就会发出报错警告,但是如何在子组件完全拿到这个值呢

computed: {
    viewsData: {
      get() {
        return this.data
      },
      set(data) {
        return data
      },
    },
  },

那我们可以去试试在子组件里面通过计算属性拿到这个值,进而保存这个值,让这个值属于子组件,这样我们我们怎么改变这个值,这个值仍然属于子组件.

但是这样还会有一个问题,我们子组件改变了这个值,但是这个值根源还是父组件,如果父组件需要这个值,那我们父组件拿到是最初始给子组件的那个值,无法拿到子组件修改的那个值,这样父子组件的值不同步,那就会出现非常巨大的bug

解决这个问题其实也很简单,因为那个值最开始是父组件传给子组件的,那我们子组件只是拿到那个数据结构进行渲染,修改结构里面的值(修改数据结构除外哈),那我们子组件可以通过修改事情的同时,将那个修改好的那个值通过this.$emit 发送给父组件,父组件通过接受这个值进而替换到原先的那个值,这样就解决了

/**
  * 修改子组件时同步父组件数据
  */
  this.$emit('synchronousData', this.detailsView)

/**
* 父组件更新值
*/
synchronousData(e) {
   this.data = e
}