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 use the props configuration to pass data into it from the parent, but when I try it out I can't get it to work.

I have the example I'm working on up on 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>'
        }
   }
});

When I run the above code, my output is only:

, Chris

The data local to the child component renders fine, but the passed in parent's data is either not coming through or is not properly rendering.

I don't see any errors in the javascript console and the template is rendering.

Am I misunderstanding how the props are supposed to be passed in?

Solution 1

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

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-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