Understanding props in vue.js

Question

I\'m working through the guide for learning vue.js, got to the section on props, and ran into a question.

I understand that child components have isolated scops and we

Answer 1

I've updated your fiddle

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

You need to pass props from the parent to the child on the html component.

Answer 2

You can also pass any string to "greeting" by just setting it like normal html attribute, without using v-bind directive.

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

Will also work. Note that anything you pass that way will be interpreted as plain string.

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

Will result in "2 + 2, Chris".
More in user guide: https://vuejs.org/v2/guide/components.html#Props

Answer 3

You have to bind the value to the component prop like this:

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

Answered here: Vue JS rc-1 Passing Data Through Props Not Working