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元素是无反应的，并且不显示selected属性。那么，如何使安装了渲染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]))])
  }
}

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

1 个答案: