Vuejs: passing props to a component in javascript?

Question

How can I pass the details to the Vue component.

this is how i usually do it.

<child prop="value"></value> 

but I want to do it like this

 var Child = Vue.extend({ ... }); Chid.passProps( {foo: 'bar'} ) // some thing like this? 

is this possible in vue.js?

this is the full code:

 var Child = Vue.extend({ props: ['foo'], methods: { printIt: function() { console.log(this.foo) } }, template: '#example' }); var vm = new Vue({ el: '#root', data: { foo: 'bar' }, render: function(createElement) { return createElement(Child); // pass down foo } }); 

jsbin link

Answer 1

Please read the section on rendering functions https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

Essentially, you need to pass the details with a call to the rendering function as part of the data element

 var vm = new Vue({ el: '#root', data: { foo: 'bar' }, render: function(createElement) { return createElement(Child, { props: { foo: this.foo } }) } });