By

父子孙向下传递异步数据

标准做法有 vuex, provide/inject 等.

我的做法: 再子组件先用 data + watch 把数据接下来，然后用 props 传给孙组件: 子组件

    data() {
        return {
            images: []
        }
    },
    watch: {
        "post_info": function (newVal, oldVal) {
            this.images = newVal['images'];
        }
        },

孙组件:

 props: ['images'],

孙组件例子:简单的代码就完成了就完成了图片 9 宫格的组件，还是不错的.

<template>
    <div class="row no-gutters justify-content-between">
        <template v-if="images.length">
            <img v-for="image in images" :src="image['url']" :class="layout(images.length)">
        </template>
    </div>
</template>

<script>
    export default {
        props: ['images'],
        name: "FeedMediaGallery",
        computed: {
            layout: function () {
                function f(level) {
                    return this.chooseLayout(level)
                }
                return f
            }
        },
        methods: {
            chooseLayout(level) {
               switch (level) {
                   default:
                   case 1:
                       return "l1";
                   case 2:
                   case 4:
                   case 5:
                       return "l2";
                   case 3:
                   case 6:
                       return "l3";
               }
            }
        }
    }
</script>

<style scoped lang="scss">
    .l1 {
        width: 87.2vw;
        height: 274px;
        object-fit: cover;
        padding-bottom: 1.2%;
    }
    .l2 {
        width: 43vw;
        height: 43vw;
        object-fit: cover;
        padding-bottom: 1.2%;
    }
    .l3 {
        width: 28.3vw;
        height: 28.3vw;
        object-fit: cover;
        padding-bottom: 1.2%;
    }
</style>