Informazioni sugli oggetti di scena in vue.js

Question

Sto lavorando alla guida per l'apprendimento di vue.js, sono arrivato alla sezione sugli oggetti di scena e ho trovato una domanda.

Capisco che i componenti figlio abbiano scops isolati e usiamo la configurazione dei puntelli per passare i dati dal genitore, ma quando lo provo non riesco a farlo funzionare.

ho the example I'm working on up on js fiddle:

var vm = new Vue({ 
    el: '#app', 
    // data from my parent that I want to pass to the child component 
    data:{ 
     greeting: 'hi' 
    }, 
    components:{ 
     'person-container':{ 

      // passing in the 'greeting' property from the parent to the child component 
      props:['greeting'], 

      // setting data locally for the child 
      data: function(){ 
       return { name: 'Chris' }; 
      }, 

      // using both local and parent data in the child's template 
      template: '<div> {{ greeting }}, {{ name }}</div>' 
     } 
    } 
}); 

Quando eseguo il codice di cui sopra, la mia uscita è unica:

, Chris

I dati locale per il componente figlio rende bene , ma i dati del genitore passati non arrivano o non sono correttamente visualizzati.

Non vedo errori nella console javascript e il modello è in rendering.

Sto fraintendendo il modo in cui i puntelli dovrebbero essere passati?

Answer 1

si deve associare il valore per il puntello componente in questo modo:

<person-container v-bind:greeting="greeting"></person-container> 

Jsfiddle https://jsfiddle.net/y8b6xr67/

risposta qui: Vue JS rc-1 Passing Data Through Props Not Working

Answer 2

Ho aggiornato il vostro fiddle

<person-container :greeting="greeting"></person-container> 

È necessario passare gli oggetti di scena dal genitore al figlio sul componente html.

Answer 3

È anche possibile passare qualsiasi stringa a "saluto" semplicemente impostandola come normale attributo html, senza utilizzare la direttiva v-bind.

<person-container greeting="hi"></person-container> 

Funzionerà anche. Nota che tutto ciò che passi in quel modo sarà interpretato come una stringa semplice.

<person-container greeting="2 + 2"></person-container> 

Il risultato sarà "2 + 2, Chris".
Altro nella guida per l'utente: https://vuejs.org/v2/guide/components.html#Props