VueJS pass props to children in render function call

Question

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 1

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.