istanze/elementi vue.js nidificati

Questa potrebbe sembrare una vera domanda noob, ma sono piuttosto nuova per MVVM ... o anche MVC in JS, quindi mi dispiace in anticipo.istanze/elementi vue.js nidificati

Sto giocando con vue.js e ne amo la semplicità fino ad ora. Ma per quello che sto cercando di fare, penso di aver bisogno di affrontarlo in un modo diverso.

Voglio nidificare istanze/elementi di Vue all'interno dell'altro, ma ovviamente, il genitore utilizzerà quindi il figlio quando legge il DOM su init.

Per motivi di argomenti, di seguito è un esempio di quello che voglio dire, non sto facendo nulla di simile, ma questo è il modo più semplice per esempio quello che voglio dire:

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

Poi i miei JS per esempio potrebbe essere:

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

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

Il risultato sarebbe:

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

Ora mi sono completamente understa e perché lo sta facendo e in effetti dovrebbe farlo, ma il mio esempio sta solo cercando di illustrare come farei qualcosa di simile?

Nel mio progetto di vita reale, ho una classe V sul mio corpo che cambia quando qualcosa accade nel corpo (in numerosi luoghi) ma ovviamente il mio corpo vorrà anche altri esempi di vue che fanno altre cose.

come fare per nidificare? C'è una caratteristica in grado di affrontare questo? Devo occuparmi di componenti? O forse, recuperare il corpo da un elemento figlio (ad esempio jQuery con $ ("body")) quindi manipolarlo all'interno dell'istanza Vue?

Spero che questa domanda non sia troppo stupida e qualcuno possa indicarmi la giusta direzione.

Grazie

fonte

2015-07-10 keogh

Componenti di Think. http://vuejs.org/guide/components.html

Creare un'istanza Vue sul corpo come sopra, ma qualsiasi elemento annidato è un componente. Passa i dati tramite oggetti di scena.

fonte

2015-07-11 18:34:37 Fergal

Il passaggio di dati tramite oggetti di scena è solo un modo per farlo. Anche i componenti di nidificazione e l'ereditarietà del genitore funzionano bene.

Esempio: http://jsfiddle.net/hajkrupo/3/

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

fonte

2015-07-23 14:53:15 swift

Si può fare questo con <slot> tags. Ecco un esempio.

1. Quindi, per prima cosa, è necessario creare un componente di layout di base, come questo. Devi aggiungere il tag <slot> ovunque tu voglia. Molto importante è l'attributo nome sul tag <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. Quindi creare il componente personalizzato. Ho creato il componente myHeader per mostrarti come funziona.

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

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

    ` 
});

3. Inserire questo codice di esempio nel file HTML. Per inserire del contenuto nello slot corrente, basta usare l'attributo slot nel componente o nel tag.

<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. Il risultato sarà simile a questo:

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

Si prega di consultare la documentazione in pagina ufficiale di Vue.js Basta cliccare sul link here per ulteriori informazioni.

Ecco un esempio in jsfiddle

fonte

2017-04-19 18:04:46 riverside256

istanze/elementi vue.js nidificati

risposta

Problemi correlati