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

tony19 · Accepted Answer · 2022-07-15 01:25:15Z

10

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
            }  
        })
    }
});

edited Jul 15, 2022 at 1:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 10, 2016 at 9:47

vbranden

6,0262 gold badges24 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abzalassembekov Over a year ago

Thanks a lot! Saved tons of time. Here is more information in official documentation: vuejs.org/v2/guide/…

Collectives™ on Stack Overflow

vuejs : passing props down to a component in javascript?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related