uniapp小程序项目里的page页获取json数据，传递给子组件，怎么使用最高效？

目前想到几个方法，但是我不确定哪个更好，请大佬指点一下！！！

使用场景：长列表展示，如淘宝订单列表，有“确认收货”/“查看物流”等按钮

其他说明：

1. json数组可能比较大，且可能有好几层；
2. 可能是page获取json，然后调用组件A，组件A调用组件B，组件B调用组件C，C中使用json；

【方法一】子组件用到json数据里什么值，就传递哪个值：
page：

<view :key1="json.key1" :key2="json.key2" :key3="json.key3" ... :keyN="json.keyN" />  

export default {  
    data(){  
        return{  
            json:{}  
        }  
    },  
    onLoad() {  
        this.json = getData()  
    }  
}

子组件：

<view>{{key1}}</view>  
<view>{{key2}}</view>  
<view>{{key3}}</view>  
...  
<view>{{keyN}}</view>  

export default {  
    props: {  
        key1: String,  
        key2: Boolean,  
        key3: Number,  
        ...  
        keyN: Number  
    }  
}

【方法二】子组件传递json数据全部内容或截取部分：
page：

<view :json="json" />  

export default {  
    data(){  
        return{  
            json:{}  
        }  
    },  
    onLoad() {  
        this.json = getData()  
    }  
}

子组件：

<view>{{json.key1}}</view>  
<view>{{json.key2}}</view>  
<view>{{json.key3}}</view>  
...  
<view>{{json.keyN}}</view>  

export default {  
    props: {  
        json: Object  
    }  
}

【方法三】子组件传递json数据全部内容或截取部分，先props接收，然后给computed里的a(){return json.key}：
page：

<view :json="json" />  

export default {  
    data(){  
        return{  
            json:{}  
        }  
    },  
    onLoad() {  
        this.json = getData()  
    }  
}

子组件：

<view>{{a}}</view>  
<view>{{b}}</view>  
<view>{{c}}</view>  
...  
<view>{{n}}</view>  

export default {  
    props: {  
        json: Object  
    },  
    computed:{  
        a(){return json.key1},  
        b(){return json.key2},  
        c(){return json.key3},  
        ...  
        n(){return json.keyN}  
    }  
}

【方法四】page获取json数据，先给computed，然后传递给子组件json数据全部内容或截取部分：
page：

<view :jsonA="jsonA" />  

export default {  
    data(){  
        return{  
            json:{}  
        }  
    },  
    computed:{  
        jsonA(){return json }  
    },  
    onLoad() {  
        this.json = getData()  
    }  
}

子组件：

<view>{{jsonA.key1}}</view>  
<view>{{jsonA.key2}}</view>  
<view>{{jsonA.key3}}</view>  
...  
<view>{{jsonA.keyN}}</view>  

export default {  
    props: {  
        json: jsonA  
    }  
}