Komponenten und Slots Ansatz

Question

Ich habe eigentlich 2 globale Komponenten für Admin und andere für Modal. Die Admin-Komponente hat eine untergeordnete Komponente namens Seite und die Seite comp hat andere untergeordnete Elemente. Ich möchte Inhalte direkt über die Slots an Page comp weitergeben. Wie folgt aus:

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> 

Ich brauche nicht Seite als globale Komponente, Bitte irgendeine Idee ?? Ich hoffe, Sie verstehen, was ich suche ...

Dank

Answer 1

Ich glaube nicht Slots, dies tun sollen. Wenn Sie Daten zwischen Eltern und Kindern erhalten möchten, dann verwenden Sie entweder Requisiten wie @Belmin Bedak vorgeschlagen. Wenn Sie eine Requisite an eine Komponente übergeben, steht sie allen ihren Kindern zur Verfügung. Wenn Sie am Front-End persistent bleiben müssen, empfehle ich dringend, Vuex als Datenquelle für alle Komponenten zu verwenden (nur verwenden, wenn die Komplexität der Daten über die Komponenten hinweg immer komplexer wird).