Vuejs verschachtelte Komponenten mit Inline-Vorlage

Question

Ich werde am Ende eine Menge verschiedener Komponenten für jede Seite verschachtelt haben. Ich habe eine Komponentenansicht für jede Seite in meiner Anwendung. Auf jeder Seite gibt es verschiedene Vue-Instanzen, die wiederverwendete Komponenten wie Schieberegler, Tabber, Karussell usw. verwenden.

Ich versuche dies zu restrukturieren, da sich viele Vue-Instanzen gegenseitig stören und mir wurde klar, dass ich nur eine Haupt-Vue-Instanz mit vielen inneren Komponenten haben sollte.

Dies ist, was ich bisher aufgebaut:

http://jsfiddle.net/jmtg5r4s/

Das Problem ist, dass es nach Unterbrechung der Home-Ansicht Komponente geladen. Es werden keine verschachtelten Komponenten geladen, es sei denn, ich habe eine Vorlage für sie eingerichtet, die ich nicht ausführen möchte, weil ich die Laravel-Blade-Syntax nutzen und kein normales HTML verwenden möchte. Plus alle meine serverseitige Helfer usw.

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> 

Ich könnte dies sein Grübeln, aber danke für jede Hilfe/Ideen!

Answer 1

Sie mischen das Konzept einer Vorlage für eine Komponente mit vorhandenem Inhalt, der möglicherweise in einer Komponente vorhanden ist, wenn kompiliert wird. In AngularJS wird dies als "Transclusion" bezeichnet. In Vue wird bezeichnet als „Content Insertion“ und Sie können mehr darüber lesen Sie hier:

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

Grundsätzlich Sie die Inhalte Insertion Techniken verwenden müssen, um die Wirkung der Wiederverwendung von Inhalten in eine bekommen Komponente, wenn es kompiliert wird. Andernfalls nimmt eine Komponente an, dass ihr gesamter Inhalt aus ihrer Vorlage stammt.

Answer 2

Ich hatte ein ähnliches Problem. Sie können es lösen, indem sie den „inline-Template“ -Attribut auf Ihrer Home-Ansicht "Komponente aswell setzen:

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

Die innerHTML- der Komponente die Komponenten Vorlage betrachtet werden, wenn das Inline-Attribut template es galt.

Reference on Vue.js docs