Question

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

我创建了一个几乎与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

仅当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，但循环遍历父级中的分页行，提供自定义正文。

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

当用作插槽的子节点时，Vue组件未定义属性

1 个答案: