vuejs:将道具传递给javascript中的组件？

Question

我怎样才能将道具传递给javascript Vue组件.

这就是我通常的做法.

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

链接到jsbin

Answer 1

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

基本上你需要通过调用render函数来传递props作为数据元素的一部分

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