vuejs：將道具傳遞給javascript中的組件？

Question

我如何將道具傳遞給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://vuejs.org/v2/guide/render-function.html#createElement-Arguments

從本質上講，你需要與呼叫通過道具來渲染功能部分的數據元素

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