組件和插槽方法

Question

我實際上有2個全局組件，一個用於Admin，另一個用於Modal。 Admin組件有一個稱為Page的子組件，而Page組件有其他子組件。 我想通過插槽將內容直接傳遞給Page comp。 像這樣：

app.js

new Vue({
    el: '#app',
    components: { Admin, Modal }
})

管理員權限

<template>
  <div>
    <page>
      <slot></slot>
    </page>
  </div>
</template>

export default {
  components: { Page }
}

網頁

<template>
<div>
   <page-header>
        <slot name="page-header">
            <h1 class="page-title">
                <slot name="page-title">
                    Page Title
                </slot>
            </h1>
        </slot>
    </page-header>
    <page-body>
        <slot>
            Page Body
        </slot>
    </page-body>
    <page-footer>
        <slot name="page-footer">
            Page Footer
        </slot>
    </page-footer>
</div>
</template>

export default {
        components: {
            pageHeader,
            pageBody,
            pageFooter
        }
}

index.html

<admin>
    <div slot="page-header">
       Header Test
    </div>
    Body Test
    <div slot="page-footer">
      Footer Test
    </div>
</admin>

我不需要將Page用作全局組件，請問任何想法嗎？ 希望你明白我在找什么...

謝謝

Answer 1

我不認為插槽是設計用來做到這一點的。 如果您需要在父母與孩子之間保留數據，請使用任一道具，如@Belmin Bedak建議的那樣。 當您將道具傳遞到組件時，它將對所有子項可用。 如果您需要在前端保持狀態，我強烈建議您使用Vuex作為所有組件的數據源（僅當數據分散到各個組件變得更加復雜時才使用）。