Vuejs iç içe geçmiş bileşenleri,

Question

numaralı satır içi şablonlarıyla, her sayfa için çok sayıda farklı bileşenin iç içe geçmiş olmasını sağlayacağım. Uygulamamdaki her sayfa için bir bileşen görünümüm var. Her sayfada, kaydırıcı, tabber, karusel, vb. Gibi bileşenleri yeniden kullanacak farklı Vue örnekleri vardır.

Bir çok Vue örneğinin birbirine müdahale ettiğinden, bunu yeniden yapılandırmaya çalışıyorum. ve fark ettim ki, çok fazla iç bileşeni olan tek bir ana Vue örneğim olmalı.

Bu defa kurdunuz budur:

http://jsfiddle.net/jmtg5r4s/

sorundur ev görünümü bileşenini yükledikten sonra durur olmasıdır. Benim yapmak istemediğim bir şablon yoksa, iç içe geçmiş bileşenler yüklenmeyecek çünkü Laravel blade sözdiziminden yararlanmak ve normal HTML kullanmamak istiyorum. Artı benim sunucu tarafı yardımcıları tüm vs.

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> 

Bunu overthinking, ancak herhangi bir yardım/fikirler için teşekkür ederiz olabilir!

Answer 1

Derleme sırasında bir bileşende bulunabilecek varolan içeriğe sahip bir bileşen için bir şablon kavramını karıştırıyorsunuz. AngularJS'de buna "transkripsiyon" denir. Vue, bu "İçerik Ekleme" olarak anılır ve burada bu konuda daha fazla bilgi edinebilirsiniz:

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

, bir içerik mevcut yeniden etkisini elde etmek İçerik Ekleme teknikleri kullanmak gerekir derlendiğinde bileşen. Aksi takdirde, bir bileşen tüm içeriğinin şablonundan geldiğini varsayar.

Answer 2

Benzer bir sorunla karşılaştım. bileşenin innerHTML bileşenleri şablon inline-şablon özniteliği varsa kabul edilir

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

: Eğer 'ev görünümü' bileşeni aswell "inline-şablon" ayrıntısını koyarak bunu çözebilir uygulandı.

Reference on Vue.js docs