2015-07-10 10 views
14

Może to brzmieć jak prawdziwe pytanie typu noob, ale jestem całkiem nowy dla MVVM ... lub nawet MVC w JS, więc przepraszam z góry.Zagnieżdżone instancje/elementy vue.js

Gram z vue.js i kocham prostotę tego do tej pory. Ale jeśli chodzi o to, co próbuję zrobić, myślę, że muszę podchodzić do tego inaczej.

Chcę zagnieżdżać instancje/elementy Vue w sobie nawzajem, ale oczywiście rodzic użyje wtedy dziecka, gdy czyta przez DOM na init.

Dla argumentów, poniżej jest przykładem tego, co mam na myśli, nie robię czegoś takiego, ale jest to najprostszy sposób na przykład o co mi chodzi:

<body> 
    {{ message }} 
    <div id="another"> 
     {{ message }} 
    </div> 
</body> 

wtedy mój JS dla przykładem może być:

new Vue({ 
    el: "body", 
    data: { 
     message: "I'm the parent" 
    } 
}); 

new Vue({ 
    el: "#another", 
    data: { 
     message: "I'm the child" 
    } 
}); 

wynik byłby:

<body> 
    I'm the parent 
    <div id="another"> 
     I'm the parent 
    </div> 
</body> 

teraz całkowicie understa I dlaczego tak się dzieje, i faktycznie powinien to zrobić, ale moim przykładem jest po prostu próbować zilustrować, jak zrobiłbym coś takiego?

W moim prawdziwym projekcie życia, mam v-klasę na moim ciele, która zmienia się, gdy coś dzieje się w ciele (w wielu miejscach), ale oczywiście moje ciało będzie również chciało innych instancji vue, które robią inne rzeczy.

Jak mam się zagnieżdżać? Czy w Vue istnieje funkcja, aby sobie z tym poradzić? Czy muszę zajmować się komponentami? A może pobrać ciało z elementu potomnego (np. Jak jQuery z $ ("body")), a następnie manipulować nim w instancji Vue?

Mam nadzieję, że to pytanie nie jest zbyt głupie i ktoś może wskazać mi właściwy kierunek.

Dzięki

Odpowiedz

3

Przekazywanie danych za pomocą rekwizytów to tylko jeden sposób na zrobienie tego. Zagnieżdżanie komponentów i dziedziczenie z rodzica również działa dobrze.

Przykład: http://jsfiddle.net/hajkrupo/3/

<encapsulated-component inline-template> 
    <header> 
     <cart-status></cart-status> 
    </header> 
    <cart></cart> 
</encapsulated-component> 
0

Można to zrobić z <slot> tagów. Oto przykład.

1. Tak więc, najpierw należy utworzyć podstawowy komponent układu, taki jak ten. Musisz dodać tag <slot>, gdziekolwiek chcesz. Bardzo ważny jest atrybut nazwa na tagu <slot>.

var basicLayout = Vue.component("basic-layout", { 
    template: ` 

    <div class="basic-layout"> 
     <header> 
      <slot name="header"></slot> 
     </header> 
     <main> 
      <slot></slot> 
     </main> 
     <footer> 
      <slot name="footer"></slot> 
     </footer> 
    </div> 

    ` 
}); 

2. Następnie utwórz komponent niestandardowy. Stworzyłem komponent myHeader, aby pokazać, jak działa.

var myHeader = Vue.component("my-header", { 
    template: ` 

    <div class="header"> 
     <ul> 
      <li>HOME</li> 
      <li>ABOUT</li> 
      <li>CONTACT</li> 
     </ul> 
    </div> 

    ` 
}); 

3. Umieść ten przykładowy kod w pliku HTML. Aby umieścić trochę treści w bieżącym gnieździe, po prostu użyj atrybutu slot w swoim komponencie lub tagu.

<div class="app"> 
    <basic-layout> 
     <my-header slot="header"></my-header> 

     <p>Content in &lt;main&gt; tag</p> 

     <p slot="footer">Content in footer</p> 
    </basic-layout> 
</div> 

4. wynik będzie tak:

<div class="app"> 
    <div class="basic-layout"> 
     <header> 
      <div class="header"> 
       <ul> 
       <li>HOME</li> 
       <li>ABOUT</li> 
       <li>CONTACT</li> 
       </ul> 
      </div> 
     </header> 

     <main> 
     <p>Content in &lt;main&gt; tag</p> 
     <main> 

     <footer> 
      <p>Content in footer</p> 
     </footer> 
    </div> 
</div> 

Proszę zapoznać się z dokumentacją w oficjalnej stronie Vue.js Wystarczy kliknąć odnośnik here aby uzyskać więcej informacji.

Oto przykład w jsfiddle