Vue 在与渲染功能一起使用时失去槽反应性

Question

我有这个标记

    <ComponentA>
       <Child @click="selected=1">{{selected}}</Child>
       <Child @click="selected=2">{{selected}}</Child>
       <Child @click="selected=3">{{selected}}</Child>
       <Child @click="selected=4">{{selected}}</Child>
    </ComponentA> 

  data() {
    return: {selected: -1}
  }

没关系，它是响应式的，它显示selected in -1，如果单击任何Child，selected 将更改并显示在Dom 中。但是我需要一种方法来根据特定条件仅安装 Child 的一部分。所以我的方法如下所示：

<!-- ComponentA -->
<template>
 <div id="container">
   <slot></slot>
 </div>
</template>

function selectChildren(VNodes) {...} // return VNode[]
function mountSelectionChildren(VNodes) {
  const childrenCmp = {
    data: function () {
     return {
      items: [],
     }
    },
    mounted() {
      this.items = selectChildren(VNodes) // get a slice of total Child, based on certains conditions I ommited
    }
    render(h) {
      return h("div", [this.items.map(item => h("div", {...},[item]))])
    }
  }
  new Vue(childrenCmp).$mount("#container") 
}
export default {
  mounted() {
    mountSelectionChildren(this.$slots.default)
  }
}

它可以渲染我想要的 DOM 和 UI，但是现在，单击 Child elems 不是反应式的，并且不显示 selected 属性。那么，我怎样才能使安装了 render fn 的插槽变成反应式的呢？

Answer 1

尝试类似：

function selectChildren(VNodes) {...} // return VNode[]

export default {
  render(h){
    let VNodes = this.$slots.default || []

    let items = selectChildren(VNodes)
    return h("div", [items.map(item => h("div", {...},[item]))])
  }
}