親データが変更されると、VueJS子コンポーネントは更新されません

Question

コンポーネントをラップするparentコンポーネントがあります。私は、親コンポーネントにすべての子の状態を管理させたい。子供がクリックされると、私は親が知りたいと思うので、どの兄弟がアクティブであるかを知るように、すべての兄弟を更新したい。

JSFIDDLE DEMO

Vue.component('child', { 
    template: '#childtemplate', 
    props: ['index', 'activeIndex'], 
    methods: { 
    updateActiveIndex: function() { 
     console.log("emitting"); 
     this.$emit('updateEvent', this.index); 
    } 
    } 
}); 

Vue.component('parent', { 
    data: function() { 
    return { 
     activeIndex: 0 
    } 
    }, 
    render: function(createElement) { 
    console.log("rendering ai->", this.activeIndex); 

    this.$options._renderChildren.forEach(function(item, index) { 
     if (item.data === undefined) 
     return; 

     item.componentOptions.propsData = { 
     index: index, 
     activeIndex: this.activeIndex 
     } 
    }.bind(this)); 

    return createElement('div', {}, this.$options._renderChildren); 
    }, 
    methods: { 
    handleToggle: function(index) { 
     this.activeIndex = index; 
    } 
    }, 
    created: function() { 
    this.$on('updateEvent', this.handleToggle); 
    //try manually update it, but the children don't update. 
    setTimeout(function(){this.activeIndex = 6}.bind(this), 3000); 
    } 
}); 

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

私はそうのようなparentrender()でのcreateElement関数にイベントリスナーオプションを追加しようとしている：

return createElement('div', {on:{updateEvent: this.handleToggle}}, this.$options._renderChildren); 

私はparent作成機能で$onリスナーを設定しようとしています。しかし、これは引き起こされません。

私はactiveIndexを手動で更新しようとしましたが、タイムアウトはルート上で更新されますが、子は更新されません。

ハックソリューションと私は仕事に見つけた唯一のことは、親に子供をループして、手動で小道具を割り当て、インデックスを渡し、子から直接$parentコールバックを参照することです。これにより、vueはエラーを警告しますが、ジョブは完了します。

良い方法はありますか？

Answer 1

私はこれが良いとは分かりませんが、これはmodified fiddleで動作します。基本的にはデフォルトのスロットを反復し、childでないものはすべて破棄し、適切なプロパティを設定し、現在各子のスロットにあるものを含めます。

render: function(createElement) { 
    console.log("rendering ai->", this.activeIndex); 

    const children = []; 
    for (let i=0; i < this.$slots.default.length; i++){ 
    if (!(this.$slots.default[i].tag == "child")) 
     continue; 

    children.push(createElement(Child, { 
     props:{ 
     index: i, 
     activeIndex: this.activeIndex 
     }, 
     on:{ 
     updateEvent: this.handleToggle 
     } 
    }, this.$slots.default[i].children)) 

    } 

    return createElement('div', {}, children); 
}