Vue: 孫のネストされた名前付きスロットにコンポーネントを渡すと、デフォルトのスロットで解決されます。

バージョン

2.5.2

複製リンク

https://jsfiddle.net/daxchen/k75y6tu0/

再現する手順

私のユースケースは、ツールバーとメインコンテンツラッパーを備えたデフォルトのレイアウトがあることです。 ただし、 SearchBarが必要なページと不要なページがあり、レイアウトのレベルが異なる場合があります。

そこで、他のレイアウトで使用するベースとしてLayoutDefaultというコンポーネントを作成しました。 また、必要に応じてデフォルトのツールバーを置き換えられるようにしたいので、フォールバックコンテンツとしてToolbarて、デフォルトのツールバーを<slot name="toolbar">に配置します。

コードスニペット：

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

次のことができるようにしたいので、これらの種類のコンポーネントを作成します。

1. 必要に応じて、デフォルトのツールバーを置き換えます。
2. デフォルトのツールバーを使用しますが、スロットに物を渡します（上記の例では"toolbarSlot" ）

そして、他のレイアウトコンポーネントでは、これを行います。

// 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>

ご覧のとおり、コンポーネントを孫のスロットに渡すために、次のパターンを使用しました： <slot name="foo" slot="foo"> 。

何らかの理由で、このパターンを使用して渡されたコンポーネントは、デフォルトのスロットがある場合はます。

複製の例2、3、および4を参照してください。

何が期待されますか？

名前付きスロットに何も渡されない場合、フォールバックコンテンツがレンダリングされ、スロットもレンダリングされると思います。

実際に何が起こっているのですか？

例2では、​​置き換えられたToolbarがLayoutDefaultのデフォルトスロットにレンダリングされます。

例3および4では、 SearchBarはslot="toolbarSlot"に渡されますが、レンダリングされません。

これは予想される動作ですか？
または、デフォルトのパーツをそれぞれ交換可能にして、このような再利用可能なレイアウトを作成する方法があり、デフォルトのパーツを使用している場合は、コンポーネントを（デフォルトのパーツ）スロットに渡すことができますか？