Vue: La transmission du composant à l'emplacement nommé imbriqué des petits-enfants sera résolu dans l'emplacement par défaut.

Créé le 3 nov. 2017 · 5Commentaires · Source: vuejs/vue

Version

2.5.2

Lien de reproduction

Étapes à suivre pour reproduire

Mon cas d'utilisation est que j'ai une mise en page par défaut avec la barre d'outils et l'encapsuleur de contenu principal. Mais certaines pages ont besoin d'un SearchBar et d'autres non, et les mises en page peuvent avoir des niveaux différents.

J'ai donc créé un composant appelé LayoutDefault comme base pour d'autres mises en page à utiliser. Et comme je veux pouvoir remplacer la barre d'outils par défaut en cas de besoin, j'ai mis la barre d'outils par défaut dans <slot name="toolbar"> , avec Toolbar comme contenu de secours.

Extrait de code:

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

Je fabrique ce genre de composants parce que je veux pouvoir:

Remplacez la barre d'outils par défaut si nécessaire.
Utiliser la barre d'outils par défaut, mais passer des choses à son emplacement ( "toolbarSlot" dans l'exemple ci-dessus)

Et puis dans d'autres composants de mise en page, je fais ceci:

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

Comme vous pouvez le voir, pour passer des composants aux emplacements des petits-enfants, j'ai utilisé ce modèle: <slot name="foo" slot="foo"> .

Pour une raison quelconque, les composants passés à l'aide de ce modèle seront passés à l' emplacement par défaut s'il y en a un.

Voir les exemples 2, 3 et 4 dans la reproduction.

Qu'attend-on?

Je m'attends à ce que lorsque rien n'est passé à un emplacement nommé, le contenu de secours sera rendu, avec ses emplacements également.

Que se passe-t-il réellement?

Dans l'exemple 2, le Toolbar remplacé est rendu dans l'emplacement par défaut de LayoutDefault .

Dans les exemples 3 et 4, SearchBar est passé à slot="toolbarSlot" , mais n'est pas rendu.

Est-ce le comportement attendu?
Ou s'il y a un moyen pour moi de rendre ce type de mises en page réutilisables avec chaque pièce par défaut remplaçable, et si vous utilisez les pièces par défaut, pouvoir passer des composants dans leurs emplacements (par défaut)?

bug

Source