component 动态组件为子组件， props获取不到数据

Question

props 获取的值为undefined

需求： 1、需要将 父组件获取到的数据传递到对应组件的data里 ，通过:list 传递给小组件到的

这是引入component 的 父组件

<template>
    <!-- <web-view :webview-styles="webviewStyles"  src="https://uniapp.dcloud.io/static/web-view.html"></web-view> -->
    <eptaskpage :lists="lists"></eptaskpage>
</template>

<script>
    import eptaskpage from "@/pages/task/task-page/task-page.vue"

    export default {
        components: {
            eptaskpage,
        },
        data() {
            return {
                lists: {
                    banner: [],
                    grid: [],
                }


            }
        },
        onLoad() {
            console.log('开始加载数据')
            // this.getBanner(),
            this.getGrid()
            // this.getLcard2()
            // this.getAdList();
        },
        methods: {
            async getBanner() {
                let _self = this;
                let param = {
                    type: '0'
                };
                _self.banner = await _self.$apis.getBanner(param);
            },
            // getGrid() {
            //  var _self = this;
            //  console.log(_self,9585)
            // },
            getGrid() {
                var _self = this;
                uni.request({
                    url: 'http://122.112.191.190:8080/API/more_video', //请求接口
                    data: {
                        'video_type': '',
                        'price_order': '',
                        'hot_order': '',
                        'price': 'F',
                        'discount': '',
                        'general_order': ''
                    },
                    success: (res) => {
                        _self.lists.grid = res.data.data
                        console.log(res, "111111111111")
                        this.flag = true
                    }
                });
            },

这是component 子组件，用import 引入的小组件来动态生成的页面，封装成为组件

<template>
    <joy-page class="ep-taskpage">
        <div v-for="(item,i) in page_template.items" :key="i" v-if="lists">
            <component :is="item.component.tag" :list="item.component.data"></component>
        </div>
    </joy-page>
</template>

<script>
    import {
        mapState,
        mapGetters
    } from 'vuex'
    import epSearch from "@/components/ep-search/ep-search.vue"
    import epSwiper from "@/components/ep-swiper/ep-swiper.vue"
    import listTitM from "@/components/ep-tit/ep-tit-m.vue"
    import listTit from "@/components/ep-tit/ep-tit.vue"
    import epGrid from "@/components/ep-grid/ep-grid.vue"
    import epCard from "@/components/ep-card/ep-card.vue"
    import epCcard from "@/components/ep-ccard/ep-ccard.vue"
    import epCcard2 from "@/components/ep-ccard/ep-ccard2.vue"
    import epBox2 from "@/components/ep-box/ep-box-2.vue"
    import epLoadMore from '@/components/ep-b-tab/uni-load-more.vue'
    import epListCp from "@/components/ep-list-c/ep-list-cp.vue"
    export default {
        name: 'eptaskpage',
        components: {
            epSearch,
            epSwiper,
            listTit,
            epGrid,
            epCard,
            epCcard,
            epCcard2,
            epBox2,
            listTitM,
            epLoadMore,
            epListCp
        },
        props: {
            lists: {
                type: [Array, Object, Number],
                default () {
                    return
                }
            }
        },
        data() {
            return {
                page_template: { //页面的模板，整页
                    template: "", //可以指定前端对应的templete,无则默认
                    items: [ //页面上的组件数组，按顺序显示
                        {
                            component: {
                                tag: "ep-search",
                                data: ['grid']
                            }
                        },
                        {
                            component: {
                                tag: "ep-swiper",
                                data: ['banner']
                            }
                        },
                        {
                            component: {
                                tag: "ep-grid",
                                data: ['grid']
                            }
                        },
                        {
                            component: {
                                tag: "list-tit",
                                data: ['listtit']
                            }
                        },
                        {
                            component: {
                                tag: "ep-box-2",
                                data: ['adList']
                            }
                        },
                        {
                            component: {
                                tag: "list-tit",
                                data: ['listtit']
                            }
                        },
                        {
                            component: {
                                tag: "ep-ccard",
                                data: ['lcard'],
                            }
                        },
                        {
                            component: {
                                tag: "list-tit",
                                data: ['listtit']
                            }
                        },
                        {
                            component: {
                                tag: "ep-ccard",
                                data: ['lcard2'],
                            }
                        },
                        {
                            component: {
                                tag: "list-tit-m",
                                data: ['listTitM']
                            }
                        },
                        {
                            component: {
                                tag: "ep-ccard2",
                                data: ['lcard3'],
                            }
                        },
                    ]
                },
            }
        },

Answer 1

参考GPT和自己的思路：

根据你提供的代码，我看到在父组件里面将 lists 给了一个对象，其中包含了 banner 和 grid，那么在传递给子组件的时候，应该按照对象的格式传递，修改代码如下：

<eptaskpage :lists="{banner:lists.banner,grid:lists.grid}"></eptaskpage>

然后在子组件里面，即 eptaskpage 组件里面，props 接收到的对象应该是下面这个样子，其中包含了 banner 和 grid 两个数组：

{
    banner: [/* banner 数据数组 */],
    grid: [/* grid 数据数组 */],
}

然后在子组件里面，将这个 lists 绑定到了 v-if 这一项中，如果条件满足，则通过 v-for 渲染模板中指定的组件。

接着按照模板中指定的组件来讲，例如第一个组件是 ep-search，它的属性是 data，这里传递了一个数组 ['grid']，但是在子组件里面没有接收该属性，所以传递过去是没有意义的。

综上所述，要解决问题，需要在父组件里面传递正确的数据格式，然后在子组件里面处理正确的数据格式和属性绑定。有问题可以继续追问。