Componenti nested di Vuejs con modello in linea

Question

Finirò per avere un sacco di diversi componenti annidati per ogni pagina. Ho una vista componente per ogni pagina nella mia applicazione. In ogni pagina ci sono diverse istanze di Vue che riutilizzeranno i componenti che ho fatto come slider, tabber, carosello, ecc.

Sto provando a ristrutturare questo poiché molte istanze di Vue interferivano tra loro e ho capito che avrei dovuto avere solo un'istanza Vue principale con molti componenti interni.

Questo è quello che ho creato finora:

http://jsfiddle.net/jmtg5r4s/

Il problema è è che si ferma dopo aver caricato il componente di visualizzazione a casa. Non caricherà alcun componente annidato a meno che non abbia un modello impostato per loro che non voglio fare perché voglio approfittare della sintassi della lama di Laravel e non usare il normale HTML. Inoltre tutti i miei aiutanti lato server, ecc

Javascript:

var App = new Vue({ 
    el: '#app', 

    attached: function() { 
     console.log('main app loaded'); 
    }, 

    components: { 
     'home-view': { 

      attached: function() { 
       console.log('home view loaded'); 
      }, 

      components: { 
       'home-slider': { 

        attached: function() { 
         console.log('homepage slider loaded'); 
        }, 

        components: { 
         'slider': { 

          template: '#slider-template', 
          replace: true, 

          attached: function() { 
           console.log('general slider component loaded'); 
          }, 

          components: { 
           'slide': { 

            template: '#slide-template', 
            replace: true, 

            props: ['index', 'text'], 

            attached: function() { 
             console.log('general slide component loaded'); 
            } 

           } 
          } 

         } 
        } 

       } 
      } 

     } 
    } 
}); 

HTML:

<script type="x-template" id="slider-template"> 
    <div class="slider"> 
     <content></content> 
    </div> 
</script> 

<script type="x-template" id="slide-template"> 
    <div class="slide" id="slide{{ index }}"> 
     {{ text }} 
    </div> 
</script> 

<div id="app"> 
    <component is="home-view"> 
     <div id="slideshow" v-component="slider" inline-template> 
      <slider> 
       <slide index="1" text="Slide #1"></slide> 
       <slide index="2" text="Slide #2"></slide> 
      </slider> 
     </div> 

     <p>More content specific to the homepage here.</p> 
    </component> 
</div> 

Potrei essere overthinking questo, ma vi ringrazio per tutto l'aiuto/idee!

Answer 1

Si sta mescolando il concetto di un modello per un componente con contenuto esistente che potrebbe esistere in un componente al momento della compilazione. In AngularJS, si parla di "transclusione". In Vue, si parla di come "Inserimento Contenuti" e si può leggere di più qui:

http://vuejs.org/guide/components.html#Content_Insertion

In sostanza, è necessario utilizzare le tecniche di inserimento contenuti per ottenere l'effetto di riutilizzare contenuti presenti in un componente quando è compilato. Altrimenti, un componente presuppone che tutto il suo contenuto provenga dal suo modello.

Answer 2

Ho avuto un problema simile. È possibile risolverlo mettendo l'attributo "inline-modello" sulla 'casa-view' componente aswell:

<div id="app"> 
<component inline-template is="home-view"> 
    <div id="slideshow" v-component="slider" inline-template> 
     <slider> 
      <slide index="1" text="Slide #1"></slide> 
      <slide index="2" text="Slide #2"></slide> 
     </slider> 
    </div> 

    <p>More content specific to the homepage here.</p> 
</component> 

L'innerHTML del componente è considerato il modello di componenti se l'attributo inline-modello applicato.

Reference on Vue.js docs