Vue: Meneruskan komponen ke slot bernama bersarang milik cucu akan diselesaikan di slot default.

Dibuat pada 3 Nov 2017 · 5Komentar · Sumber: vuejs/vue

Versi: kapan

2.5.2

Tautan reproduksi

Langkah-langkah untuk mereproduksi

Kasus penggunaan saya adalah saya memiliki tata letak default dengan Toolbar dan pembungkus konten utama. Tetapi beberapa halaman membutuhkan SearchBar dan beberapa tidak, dan tata letak mungkin memiliki level yang berbeda.

Jadi saya membuat komponen yang disebut LayoutDefault sebagai dasar untuk menggunakan tata letak lain. Dan karena saya ingin mengganti Toolbar default saat diperlukan, saya meletakkan Toolbar default di <slot name="toolbar"> , dengan Toolbar sebagai konten pengganti.

Potongan kode:

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

Saya membuat komponen semacam ini karena saya ingin bisa:

Ganti Toolbar default jika perlu.
Menggunakan Toolbar default, tetapi berikan sesuatu ke slotnya ( "toolbarSlot" pada contoh di atas)

Dan kemudian di komponen tata letak lainnya, saya melakukan ini:

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

Seperti yang Anda lihat, untuk mengirimkan komponen ke slot cucu, saya menggunakan pola ini: <slot name="foo" slot="foo"> .

Untuk beberapa alasan, komponen yang diteruskan menggunakan pola ini akan diteruskan ke slot default jika ada.

Lihat contoh 2, 3, dan 4 di reproduksi.

Apa yang diharapkan?

Saya berharap ketika tidak ada yang diteruskan ke slot bernama, konten fallback akan dirender, dengan slotnya juga.

Apa yang sebenarnya terjadi?

Dalam contoh 2, Toolbar diganti dirender dalam slot default LayoutDefault .

Dalam contoh 3 dan 4, SearchBar diteruskan ke slot="toolbarSlot" , tetapi tidak dirender.

Apakah ini perilaku yang diharapkan?
Atau jika ada cara bagi saya untuk membuat tata letak yang dapat digunakan kembali seperti ini dengan setiap bagian default dapat diganti, dan jika menggunakan bagian default, dapat mengirimkan komponen ke slot (bagian default) mereka?

bug

Sumber