レンダリング関数呼び出しでVueJSを子に渡す

Question

複数の子「子」をラップする親コンポーネントがあります。私は親が本質的にバニラのマークアップと同じテンプレートを持っていて、私がレンダリング機能を使用している理由です。

親がアクティブな子の状態を管理するようにします。しかし小道具は子どもたちに伝わっていないようです。

私はdocumentation saysを適用しようとしましたが、小児では小道具が未定義です。しかし、私がitem.data.staticClass = 'testing-class';を行うと、そのクラスは各子供に適用されます。

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

まず第一に、私はthis.$propsは常に不定になりますと思います。 $propsプロパティは{{ $props }}のようなテンプレートでアクセスできますが、そのインラインプロパティ（フラストレーション）は、常にコンポーネントのスクリプトで使用可能な変数thisに直接マッピングされるとは限りません。 this.$options.propsDataを使用して、コンポーネントのプロット値を確認できます。

第2に、item.componentOptions.propsDataを使用して、子コンポーネントのプロパティ値を設定できます。 （私はitem.data.propsが他の何かを参照している誤称であると思う）。 Here's a fiddle with the change.