Comprendre les accessoires dans vue.js

Je travaille dans le guide pour l'apprentissage vue.js, arrivé à la section sur les accessoires, et a couru dans une question.

Je comprends que les composants enfants ont isolé des scops et nous d'utiliser les accessoires de configuration pour transmettre des données par le parent, mais quand j'ai essayer je ne peux pas le faire fonctionner.

J'ai l'exemple que je vais travailler sur 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>'
        }
   }
});

Lorsque j'exécute le code ci-dessus, ma sortie est uniquement:

Chris

Les données locales de l'enfant composante rend bien, mais le passé des parents de données n'est pas à venir à travers, ou n'est pas correctement rendu.

Je ne vois pas d'erreurs dans la console javascript et le modèle est rendu.

Suis-je malentendu comment les accessoires sont censés être passés?

source d'informationauteur Chris Schmitz