Understanding Props In Vue.js

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 use the prop

Solution 1:

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

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

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

Solution 2:

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.

Solution 3:

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

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

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

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

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