父数据变化时VueJS子组件不更新

Question

我有一个 parent 组件，它包装了多个 child 组件。我希望父组件管理其所有子组件的状态。当孩子被点击时，我希望父母知道并且我想更新它的所有兄弟姐妹，以便他们知道哪个是活动的。

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'
})

我尝试在 parent render() 中的 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);
}