javascript - vue meldet einen Fehler beim Übergeben von Objekten durch Requisiten

Question

Übergeordnete Komponente App.vue

Unterkomponente sonCp.vue

Datenstruktur

Es wird ein Fehler gemeldet, aber die Daten können gerendert werden

Entschuldigen Sie bitte, helfen Sie mir bitte zu prüfen, ob die Art und Weise, wie ich die Daten abrufe, korrekt ist.

Answer 1

子组件最初得到的是空字符串，木有.acount.name之类的属性，所以出错。

最简单的解决办法：

父组件App.vue中的

<sonCp :dataObj="dataObj" />

改成：

<sonCp :dataObj="dataObj" v-if="dataObj" />

Answer 2

异步请求的数据是会渲染两次的！第一次是请求没完成时，这时候obj是你返回的''。然后子组件去取值，肯定发生错误呀！第二次才是请求返回，然后才有数据。所以解决方式就很明显了，有很多种解决方式。

Answer 3

初始时dataObj是空字符，所以传到子组件肯定会报错，可以通过v-if判定下是否已取到数据，取到之后再进行渲染。

Answer 4

一、如楼上所述，在dom中通过v-if判断dataObj.length，保证在有数据情况下的渲染(推荐！！)

二、提前在父组件data选项中设定好dataObj对象的数据结构，比如：

data() {
    return {
        dataObj: {
            id: '',
            account: {
                name: '',
                age: ''
            }
        }
      
    };
}

另外建议楼主尽量在data选项中预留初始项时选择合适的数据类型赋默认值，比如父组件中dataObj要存放的是数组类型，尽量dataObj: []，这样也语义表达上也明确。

Answer 5

<son-cp :data-obj="dataObj"></son-cp>