记录一个在vue中父子组件传递对象的bug

1.我们最终需要的对象形式为：
我们需要渲染的对象 为一个26个字母为key值，数组为value值的对象

2. 首先我们在父组件的页面声明了一个空对象

// 父组件
    data(){
      return{
        list: {},
      }
    },

3.获取后台数据 ，然后利用for循环生成我们以26个字母为key值，数组为value值的对象

            for(let j=1;j<27;j++){
              let obj = String.fromCharCode(64 + parseInt(j))
              this.list[obj] = []
              for(let k of datas){
                if(k.group== obj){
                  this.list[obj].push(k)
                }
              }
            }

4.最后获得的对象打印出来为

{A: Array(1), B: Array(1), C: Array(1), D: Array(1), E: Array(1), …}
A: [{…}]
B: [{…}]
C: [{…}]
D: [{…}]
E: [{…}]
F: [{…}]
G: [{…}]
H: [{…}]
I: []
J: []
K: []
L: []
M: []
N: []
O: []
P: []
Q: []
R: []
S: []
T: []
U: []
V: []
W: []
X: []
Y: []
Z: []
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
__proto__: Object

5. 子组件接受

//子组件
  props: {
    obj: {
      type: Object,
      default: ()=>{}
    },
  },

6.子组件 在created 中打印这个对象

  created() {
    console.log(this.obj)
  },

{__ob__: Observer}
A: [{…}]
B: [{…}]
C: [{…}]
D: [{…}]
E: [{…}]
F: [{…}]
G: [{…}]
H: [{…}]
I: []
J: []
K: []
L: []
M: []
N: []
O: []
P: []
Q: []
R: []
S: []
T: []
U: []
V: []
W: []
X: []
Y: []
Z: []
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
__proto__: Object

7.但是页面没有东西渲染出来

image.png image.png

最后 我换了一个写法
我把 直接写在接口成功获得 26个字母数组的对象的逻辑 单独封装了 然后把得到的结果返回出去

image.png
然后子页面就渲染成功了
image.png

总结： 应该是和 vue 的数组 和对象 在改变的时候 应该调用它的this.$set的方法 页面才会同步刷新，所以 刚开始我们没有用这个方法 ，所以 页面没有同步刷新

单独封装的方法 放回的是一个新的对象 再用复制的方法，改变的是内存地址，所以数据也跟着刷新了