Vue子组件传值问题

Question

问题描述

传值给子组件的时候，如果层级关系比较复杂，语法上怎么写才能规避报错？

如以下代码，初始化组件的时候，默认值都是空，因此会报错。

当然，这些变量获取到值之后还是能正确传值给子组件，但我还是希望消除掉错误警告。

相关代码

<children :data.sync="data.arr[activeArr[0]]" />
...
data() {
    return {
        activeArr: [],
        data: {arr: []}
    }
}

实际看到的错误信息

Answer 1

 <children :data="data.arr[activeArr[0]]" v-if="data.arr[activeArr[0]]"/>
...
data() {
    return {
        activeArr: [],
        data: {arr: []}
    }
}

再定义一个值 dataList = data.arr[activeArr[0]] || '',另外子组件最好用异步组件去渲染

Answer 2

这个报错应该发生在<children>里的吧?
用computed ~

<children :data="data4Children" />
computed: {
    data4Children: function(){
        return this.data.arr[this.activeArr[0]] || {}
    }
},

Answer 3

activeArr[0] 有值吗 ？没有那就是undefined，
这时，再data.arr[activeArr[0]]了，就是 property 'undefined' of undefined

activeArr[0] && data.arr[activeArr[0]] 这样试试 ？

就是用之前先判断下这个对象的属性存在不，存在再去用，不存在用了就会报错Cannot read property 'undefined' of undefined。