Vue子组件传值问题

夜鹰
  • 742

问题描述

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

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

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

相关代码

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

实际看到的错误信息

clipboard.png

评论
阅读 372
3 个回答
 <children :data="data.arr[activeArr[0]]" v-if="data.arr[activeArr[0]]"/>
...
data() {
    return {
        activeArr: [],
        data: {arr: []}
    }
}

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

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

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

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

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

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

宣传栏