Подход к компонентам и слотам

Question

У меня есть 2 глобальных компонента один для Admin и другой для Modal. Компонент Admin имеет дочерний comp под названием «Страница», а на странице Comp - другие дочерние элементы. Я хочу передать контент прямо на страницу comp через слоты. Как это:

app.js

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

Admin.vue

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

export default { 
    components: { Page } 
} 

Page.vue

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

Мне не нужно использовать страницу как глобальный компонент, пожалуйста, любая идея? Надеюсь, вы понимаете, что я ищу ...

Благодаря

Answer 1

Я не думаю, что слоты предназначены для этого. Если вам нужны данные, которые необходимо сохранить между родителями и детьми, используйте обе реквизиты, как предлагал @Belmin Bedak. Когда вы передадите опору компоненту, он будет доступен для всех его детей. Если вам нужно сохранить состояние на интерфейсе, я настоятельно рекомендую использовать Vuex в качестве источника данных для всех компонентов (используйте только в том случае, если становится сложнее иметь данные, разбросанные по компонентам).