インラインテンプレートを使用したVuejsネストされたコンポーネント

Question

各ページにネストされたさまざまなコンポーネントがたくさんあることになります。私は自分のアプリケーションの各ページのコンポーネントビューを持っています。各ページには、スライダー、テーブルバー、カルーセルなど、私が作ったコンポーネントを再利用するさまざまなVueインスタンスがあります。多くのVueインスタンスが相互に干渉しているため、これを再構成しようとしています私は、多くの内部コンポーネントを持つメインのVueインスタンスを1つしか持たないことに気付きました。

これは私がこれまでに設定したものです：

http://jsfiddle.net/jmtg5r4s/

問題があるが、それはホームビューコンポーネントをロードした後停止していることです。 Laravelのブレード構文を利用し、通常のHTMLを使用しないために、テンプレートを設定しない限り、ネストされたコンポーネントはロードされません。プラスなど、私のサーバ側ヘルパーのすべて、

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> 

私はこれをoverthinkingかもしれないが、任意のヘルプ/アイデアをありがとう！

Answer 1

コンポーネントのテンプレートという概念を、コンパイル時にコンポーネントに存在する可能性のある既存のコンテンツと混合しています。 AngularJSでは、これを「transclusion」と呼びます。ヴューでは、「コンテンツの挿入」と呼ばれ、あなたはここでそれについての詳細を読むことができます：

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

基本的に、あなたが存在するコンテンツを再利用の効果を得るために、コンテンツの挿入技術を使用する必要がありますコンパイル時のコンポーネントです。それ以外の場合、コンポーネントはそのすべてのコンテンツがそのテンプレートから来るものとみなします。

Answer 2

私は同様の問題がありました。コンポーネントのinnerHTMLのは、コンポーネントテンプレートインラインテンプレート属性があればと考えている

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

：あなたはあなたの「ホームビュー」コンポーネントのaswellの「インラインテンプレート」属性を置くことによってそれを解決することができますそれが適用されます。

Reference on Vue.js docs