了解vue.js中的道具

我正在阅读vue.js的学习指南，进入有关道具的部分，然后遇到了一个问题。

我知道子组件具有隔离的作用域，并且我们使用props配置将数据从父组件传递到它，但是当我尝试一下时，我无法使其正常工作。

我有我正在研究js小提琴的例子：

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

当我运行上面的代码时，我的输出仅为：

， 克里斯

子组件本地的数据可以很好地呈现，但是传入的父组件的数据要么没有通过，要么没有正确呈现。

我在JavaScript控制台中没有看到任何错误，并且模板正在呈现。

我是否误解了应该如何传递道具？