Kiee Kiee - 9 months ago 191
Javascript Question

VueJS pass props to children in render function call

I have a parent component that wraps multiple children 'child'. I want the parent to essentially have the same template as the vanilla markup which is why I am using the render function.

I want the parent to manage the state of which child is active. But the props don't appear to be passing down to the children.

I have tried applying what the documentation says, but props are undefined on the children. However if I do

item.data.staticClass = 'testing-class';
that class applies to each child.

Vue.component('parent', {
data: function() {
return {
activeIndex: 0
}
},
render: function(createElement) {
this.$options._renderChildren.forEach(function(item, index) {
if (item.data === undefined) //whitespace?
return;

item.data.props = {
activeindex: this.activeIndex,
index: index
}
}.bind(this));

return createElement('div', {}, this.$options._renderChildren);
}
});

Vue.component('child', {
template: '<div>Im a child</div>',
props: ['activeindex', 'index'],
mounted: function() {
console.log(this.$props); //undefined
}
});

new Vue({
el: '#app'
});


JSFIDDLE DEMO

Answer Source

First of all, I think that this.$props will always be undefined. The $props property is accessible in a template like {{ $props }}, but those inline properties (frustratingly) don't always map up directly to the this variable available in the component's script. You can see the component's prop values using this.$options.propsData.

Secondly, you can use item.componentOptions.propsData to set the property values of the child component. (I think item.data.props is a misnomer referencing something else). Here's a fiddle with the change.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download