У меня есть компонент с именем 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
, чтобы мне не пришлось дублировать код? Если это вообще возможно, конечно. Или, может быть, есть какой-то лучший подход, о котором я не знаю?