Как (если это возможно) распространить элемент корневого слота в области видимости на большой дочерний компонент, который рекурсивно отображает родительский компонент? - PullRequest
0 голосов
/ 23 января 2019

У меня есть компонент с именем 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, то мне придется изменить его в 2 местах: в том месте, где я изначально называю tree-view, и в место, где он (может быть) вызывается рекурсивно.

Итак, вопрос : как передать корневой слот, переданный компоненту tree-view, в его дочерний компонент tree-view-item, чтобы мне не пришлось дублировать код? Если это вообще возможно, конечно. Или, может быть, есть какой-то лучший подход, о котором я не знаю?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...