Informazioni sugli elementi componenti dei componenti in VueJS

Question

Sto provando i vuejs seguendo questa serie di webcast sui larici. In https://laracasts.com/series/learning-vue-step-by-step/episodes/8, Jeffery Way discute i componenti personalizzati. Ho il seguente codice basato sul suo screencast:

<div id="app"> 
     <tasks list="tasks"></tasks> 
    </div> 

    <template id="tasks-template"> 
     <ul> 
      <li :class="{'completed' : task.c}" @click = "task.c = ! task.c" v-for ="task in tasks">{{task.t}}</li> 

     </ul> 

    </template> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script> 
    <script type="text/javascript"> 

    vue.component('tasks', { 
    template: '#tasks-template', 

    props:['list'] // why not props:['tasks'] ?? 

    }); 

    new Vue({ 
    el: '#app', 
    data: { 
     tasks: [ 
      {t: 'go to doctor', c: false}, 
      {t: 'go to work', c: false}, 
      {t: 'go to store', c: true} 
     ] 

    } 

In questo egli discute impostando gli oggetti di scena come segue:

props:['list'] 

Perché non è

props:['tasks'] ? 

In http://vuejs.org/guide/components.html#Props si afferma:

Ogni comp. l'istanza onent ha un proprio ambito isolato. Ciò significa che non è possibile (e non dovrebbe) fare direttamente riferimento ai dati principali nel modello di un componente figlio. I dati possono essere passati ai componenti figlio usando i props.Un "prop" è un campo sui dati di un componente che si prevede venga passato dal suo componente principale. Un componente figlio deve dichiarare esplicitamente gli oggetti che si aspetta di ricevere utilizzando l'opzione props:

Come fa il componente a sapere di associare l'array delle attività all'elenco? Anche in questo caso presumo child = component e parent = the vue instance?

Answer 1

La proprietà sul componente è denominata list e il valore passato è tasks.

Vediamo questo. Prima di tutto hai l'istanza di Vue principale collegata (montata) all'elemento con identificativo #app. Quindi questo è il tuo punto di partenza.

<div id="app"> 
    <tasks list="tasks"></tasks> 
</div> 

all'interno del vostro div avete un tag <tasks>. Questo tag corrisponde a una componente figlio, così

bambino = componente e genitore = l'istanza vue

è corretta. Il componente <tasks> è un'estensione della classe Vue, che ha solo una proprietà dichiarata come list. La cosa importante qui sono gli ambiti. Si noti che la proprietà list appartiene ai componenti delle attività e non ha alcun valore nella sua dichiarazione e il valore passato al modello (tutto all'interno del div #app appartiene all'istanza padre Vue (dichiarata su data dell'istanza Vue). Quindi perché non props:['tasks']? Poiché il componente <tasks> non ha dati tasks o. se effettivamente dichiarato la proprietà come attività, si dovrà scrivere il modello come segue

<div id="app"> 
    <tasks tasks="tasks"></tasks> 
</div> 

che sarebbe un confuso litle. Ecco perché l'elica è list e, a causa della dichiarazione list="tasks", il componente sa che la proprietà della lista ha il valore della matrice delle attività padre.

Answer 2

Ora Vuejs 2.x è stato rilasciato. Puoi usare v-bind per legare in modo dinamico i puntelli.Si può anche fare riferimento a https://vuejs.org/v2/guide/components.html#Dynamic-Props

Una cosa è necessario prestare attenzione è che gli attributi HTML sono case-insensitive, quindi quando si utilizzano modelli non di tipo stringa, formato camelCase prop nomi devono usare il loro kebab e minuscole equivalenti (trattino delimitato) . Ad esempio

Vue.component('child', { 
 
    // camelCase in JavaScript 
 
    props: ['myMessage'], 
 
    template: '<span>{{ myMessage }}</span>' 
 
})

<!-- kebab-case in HTML --> 
 
<child my-message="hello!"></child>

Così il campione può cambiare a seguito

<div id="app"> 
 
     <tasks v-bind:list="tasks"></tasks> 
 
    </div> 
 

 
    <template id="tasks-template"> 
 
     <ul> 
 
      <li :class="{'completed' : task.c}" @click = "task.c = ! task.c" v-for ="task in tasks">{{task.t}}</li> 
 

 
     </ul> 
 

 
    </template> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 
    <script type="text/javascript"> 
 

 
    vue.component('tasks', { 
 
    template: '#tasks-template', 
 

 
    props:['list'] // why not props:['tasks'] ?? 
 

 
    }); 
 

 
    new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     tasks: [ 
 
      {t: 'go to doctor', c: false}, 
 
      {t: 'go to work', c: false}, 
 
      {t: 'go to store', c: true} 
 
     ] 
 

 
    }