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

Question

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

我创建了一个与https://vuejs.org/v2/examples/grid-component.html几乎相同的基本组件，除了没有传递数据道具，而是在标签内部使用了一个插槽。这是完整组件的要点

在父组件中，我尝试将我的上表组件和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>

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

当使用上述方法时。我得到一个未定义URL的错误。完整错误堆栈的屏幕截图

只有当paginate组件是我的组件的子组件时，才会发生这种情况。如果我删除了我的数据表组件，那么就可以了，我可以看到行被渲染。我知道我一定是错过了一些东西，让这一切顺利。通过阅读该指南，我感觉到，由于组件是在父范围中呈现的，所以分页将首先呈现，然后替换插槽。然而，情况似乎并非如此。

有人能提供一些关于为什么这不起作用的见解和正确方法的例子吗？

谢谢

Answer 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，但循环传入父级中的分页行，提供自定义正文。

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