Vue组件用作插槽的子项时未定义的属性

Posted 2023-02-23

【中文标题】Vue组件用作插槽的子项时未定义的属性

【英文标题】：Vue component undefined property when used as child for slot

【发布时间】：2018-03-13 22:21:54

【问题描述】：

我刚刚开始使用 Vue 组件，遇到了一个我似乎无法理解的错误。

我创建了一个与https://vuejs.org/v2/examples/grid-component.html 几乎相同的基本组件，只是我没有传递数据道具，而是在标签内使用了一个插槽。 Here is a gist of that full component

在父组件中，我试图将我的上表组件和vue-paginate 组合起来输出一个分页表。

<data-table>
    <paginate
        ref="paginator"
        name="urls"
        tag="tbody"
        class="data-table-body"
        :list="fUrls"
        :per="100"
    >
        <template v-for="url in paginated('urls')">
            <conversion-row :url="url"></conversion-row>
        </template>
    </paginate>
</data-table>

为简洁起见，我删除了数据表上的道具。

当使用上述。我收到未定义网址的错误。 Screen shot of Full Error Stack

只有当分页组件是我的组件的子组件时才会发生这种情况。如果我删除我的数据表组件，那么它很好，我看到行呈现。我知道我必须遗漏一些东西才能使这一切正常工作。通读指南，我感觉到，因为组件是在父作用域中呈现的，所以分页将首先呈现然后替换插槽。不过好像不是这样的。

谁能提供一些关于为什么这不起作用的见解以及正确方法的示例？

谢谢

【问题讨论】：

我认为你的问题出在<template v-for="url in paginated('urls')"> vue 找不到urls 你能分享这段代码的完整来源吗？

@Saad 我很确定未定义来自未在父级上定义的分页。在 vue-paginate 脚本中，如果检查 "if (!this.$parent.paginate[this.name]) " Vue 开发工具显示它未定义，则失败。 take.ms/cSf6T 其中 paginate 是 DataTable 的子级。我最初试图使 inter body 尽可能灵活，但我想我只是要在 DataTable 组件中移动分页应该解决它。

【参考方案1】：

我最终重新安排了这个并使用了作用域插槽，将我的分页数据提升回我的父视图。

在我的 DataTable（子）组件中

...
<paginate
    v-if="! isLoading"
    ref="paginator"
    name="data"
    tag="tbody"
    class="data-table-body"
    :list="data"
    :per="100"
>
    <slot :data="paginated('data')"></slot>
</paginate>
...

然后在我的父模板中

<data-table :data="src">
    <template scope="dt">
        <conversion-row v-for="url in dt.data" :url="url"></conversion-row>
    </template>
</data-table>

这让我可以传入完整的数据 src，但可以遍历我的父级中的分页行，以提供自定义正文。

这可能不是最好/最有效的方法，但它适用于我的用例。如果有人有改进建议，我很乐意听到。