Question

我有一个名为tree-view的组件。

<tree-view-item
    v-for="(entry, index) in tree"
    :key="index"

    :entry="entry"
    :mode="mode"
    :deepness="deepness"
>
    <slot :entry="entry"></slot>
</tree-view-item>

它遍历传递给它的tree，并为tree-view-item中的每个条目呈现tree组件。

这就是我的称呼。

<tree-view
    :entries="tree"
    mode="folders"
    :deepness="3"
>
    <template slot-scope="{ entry }">
        {{ entry.name }}
    </template>
</tree-view>

如您所见，我正在使用作用域插槽，以便可以“从外部”指定我希望所有tree-view-item的样子。

这里的事情是tree-view-item也可以递归渲染tree-view，如果是这种情况，那么我需要再次传递广告位，这是示例。

<!-- tree-view-item's template -->
<li>
    <slot></slot>

    <tree-view
        v-if="entry.children"
        v-show="open"
        :entries="entry.children"
        :mode="mode"
        :deepness="deepness"
    >
        <template slot-scope="{ entry }">
            {{ entry.name }}
        </template>
    </tree-view>
</li>

这有点奏效。但是我不喜欢这样的方法，就是如果我想更改tree-view-item的呈现方式，那么我将不得不在两个地方进行更改：在我称之为tree-view的地方最初以及在（可能）递归调用的地方。

因此，问题是：如何将传递给tree-view组件的“根”槽传递给它的子项tree-view-item组件，所以我没有复制代码？当然，如果可能的话。还是有我不知道的更好的方法？

如何（如果可能）将“ root”范围的slot元素传播到递归呈现父级组件的大子级组件？

0 个答案: