vue.js - vuejs : passing props down to a component in javascript?

Question

我如何将 props 传递给 javascript Vue component .

这是我通常的做法。

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

但我想这样做

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

这在 vue.js 中可能吗？

这是完整的代码:

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

请阅读渲染函数部分 https://v2.vuejs.org/v2/guide/render-function.html#createElement-Arguments

本质上，您需要在调用渲染函数时将 props 作为数据元素的一部分传递

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