这个 slot 传值怎么传，设计了这个东西不应该自动传的吗？

Question

如下图：

图一是html页面调用全局组件 qx-nav

图二是全局组件qx-nav，数据是后台读取的数据，定义在js里，然后加载到html页面里的

图三是报错

请教大侠，qx-nav组件里的 itemList 的值怎么传递到图一里

搜了很多没有解决问题的，在图一里加上 v-slot="itemList" 也只能实现不报错，但是数据出不来，有没有大侠知道怎么处理？

Answer 1

最后这样解决了：

以下是html里的代码
`<nav class="navx">

<qx-list v-slot:me="data" url="${root}admin/header" items="moduleList">
    <ul>
        <li v-for="(item,index) in data.list">
            <a :href="item.actions">
                <img :src="item.icon">
                <span>{{item.modulesName}}</span>
            </a>
        </li>
    </ul>
</qx-list>

</nav>`

以下是js里的全局组件
`Vue.component("qx-list", {

template: '<div><slot name="me" :list=list></slot></div>',
props: ['url', 'items'],
data: function() {
    return {
        list: [],
        lang: {}
    }
},
created() {

    var she = this;
    var requestUrl = this.url;
    var requestParams = {};

    //
    request.post(requestUrl, requestParams, function(res) {

        var result = res.data.result;

        console.log("服务器端数据")
        console.log(result)

        if (result) {

            var items = she.items;

            // 遍历对象设置页面参数

            for (var key in result) {

                var value = result[key];

                console.log("key===>>>" + key);
                console.log(value);
                console.log("items===>>>" + items);

                if (key == items) {
                    she["list"] = value;
                } else {
                    she[key] = value;
                }


            }

            console.log("qx-list")
            console.log(she.$data)
        }

    })
},
methods: {

}

})`

本来想再封装个分页列表，包含查询表单以及所有相关的按钮操作，但仔细一想，搞那么复杂干嘛？ 使用这些工具，本来是要简化开发的，现在感觉反倒是越搞越复杂，越高越折腾，，不如不那么折腾呢

Answer 2

slot向下传递dom

例如有一个通用的头部（写成了一个通用组件），不同页面的标题不一样，
通过slot传递不同tile可以显示不同的头部信息；

Answer 3

看起来是props和slot弄混了？如果要消除错误直接在ul里面v-for modulelist就可以了，建议再看一下两者的区别。

Answer 4

首先，qx-nav属性url、list不加:？

其次，使用的是组件内的数据itemList？那你用slot-scope，目前的用法itemList应该是父组件的数据。

最后，你这是新的api，我说的是旧的，对应一下就好

Answer 5

1、去掉list="modelList"
2、ul外包一层

<template slot-scope="itemList">
    ul
        li
</template> 

https://cn.vuejs.org/v2/guide...