Понимание реквизита в vue.js

Я работаю через руководство по обучению vue.js, попал в раздел по реквизитам и задался вопросом.

Я понимаю, что у дочерних компонентов есть изолированные краны, и мы используем конфигурацию реквизита для передачи данных в нее от родителя, но когда я пытаюсь это сделать, я не могу заставить его работать.

У меня пример, над которым я работаю над 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 template
            template: '<div> {{ greeting }}, {{ name }}</div>'
        }
   }
});

Когда я запускаю вышеуказанный код, мой вывод только:

Крис

Данные, локальные для дочернего компонента, отображаются отлично, но переданные в родительские данные либо не проходят, либо неправильно отображаются.

Я не вижу ошибок в консоли javascript, а шаблон - рендеринг.

Я не понимаю, как должны быть переданы реквизиты?

Ответы

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

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

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

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