Requisiten in vue.js verstehen

Question

Ich arbeite durch den Leitfaden für das Lernen von vue.js, kam zum Abschnitt über Requisiten und stieß auf eine Frage.

Ich verstehe, dass Kind-Komponenten isoliert haben scops und wir verwenden die Requisiten-Konfiguration, um Daten in das Elternteil, aber wenn ich es ausprobiert, kann ich es nicht zum laufen bringen.

Ich habe 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>' 
     } 
    } 
}); 

Wenn ich den obigen Code ausführen, meine Ausgabe ist nur:

, Chris

Die Daten lokal auf dem untergeordneten Komponente rendert fein , aber die Daten des übergebenen Elternteils kommen entweder nicht durch oder werden nicht richtig gerendert.

Ich sehe keine Fehler in der JavaScript-Konsole und die Vorlage wird gerendert.

Bin ich falsch verstanden, wie die Requisiten weitergegeben werden sollen?

Answer 1

Sie haben den Wert auf die Komponente prop wie folgt zu binden:

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

hier beantwortet: Vue JS rc-1 Passing Data Through Props Not Working

Answer 2

Ich habe Ihre aktualisiert fiddle

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

Sie müssen Requisiten vom übergeordneten Element an das untergeordnete Element in der HTML-Komponente übergeben.

Answer 3

Sie können auch eine beliebige Zeichenfolge an "Begrüßung" übergeben, indem Sie sie einfach wie ein normales html-Attribut festlegen, ohne die v-bind-Anweisung zu verwenden.

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

Wird auch funktionieren. Beachten Sie, dass alles, was Sie auf diese Weise übergeben, als einfache Zeichenfolge interpretiert wird.

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

wird in "2 + 2, Chris" resultieren.
Mehr in der Bedienungsanleitung: https://vuejs.org/v2/guide/components.html#Props