vuejs : passing props down to a component in javascript?

Question

How can i pass down props to a javascript Vue component.

this is how i normally 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
    }
});

link to jsbin

Answer 1

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

Essentially you need to pass the props with the call to the render 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
            }  
        })
    }
});