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?

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?

• javascript
• vue.js

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

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.

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://v2.vuejs.org/v2/guide/components.html#Props