Javascript Vue.js$scopedSlots don'；不适用于Vue实例

我在一个Vue组件中工作，完成包装后将发布该组件（有一个Vue clusterize组件，但它只适用于v1.x）。我想要实现的是使用Vue快速呈现一个庞大的项目列表。我真的需要一张桌子。我试过了，但是性能不太好。所以我想尝试一下Clusterize.js

因为我希望这个组件是高度可配置的，所以我决定您将能够为接收项目的项目列表的每一行提供一个作用域插槽。问题是，当我试图在安装组件之前将范围插槽从clusterize组件分配到每一行时，它不起作用

这里有一些我的代码片段（它只是一个mvp）

群集化.vue

<clusterize :items="test">
  <template slot-scope="props">
    item
  </template>
</clusterize>

模板

<div class="clusterize">
<table>
  <thead>
    <tr>
      <th>Headers</th>
    </tr>
  </thead>
</table>
<div
  ref="scroll"
  class="clusterize-scroll">
  <table>
    <tbody
      ref="content"
      class="clusterize-content">
      <tr class="clusterize-no-data">
        <td>Loading...</td>
      </tr>
    </tbody>
  </table>
</div>

标题
加载。。。

剧本

import Vue from 'vue';
import Clusterize from 'clusterize.js';

export default {
  name: 'Clusterize',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      clusterize: null,
    };
  },
  computed: {
    rows() {
      return this.items.map(item => '<tr><slot :item="1"/></tr>');
    },
  },
  watch: {
    rows() {
      this.clusterize.update(this.rows);
    },
  },
  mounted() {
    const scrollElem = this.$refs.scroll;
    const contentElem = this.$refs.content;

    this.clusterize = new Clusterize({
      rows: this.rows,
      scrollElem,
      contentElem,
    });

    this.clusterize.html = (template) => {
      contentElem.innerHTML = template;
      const instance = new Vue({ el: contentElem });

      instance.$slots = this.$slots;
      instance.$scopedSlots = this.$scopedSlots;
      instance.$mount();

      console.log(instance.$scopedSlots); // empty
      console.log(instance.$slots) // not empty
    };
  },
};

从“Vue”导入Vue；
从“Clusterize.js”导入Clusterize；
导出默认值{
名称：“集群化”，
道具：{
项目：{
类型：数组，
要求：正确，
},
},
数据（）{
返回{
clusterize:null，
};
},
计算：{
行（）{
返回此.items.map（item=>“”）；
},
},
观察：{
行（）{
this.clusterize.update（this.rows）；
},
},
安装的（）{
const scrollem=this.$refs.scroll；
const contentElem=此。$refs.content；
this.clusterize=新的clusterize({
rows:this.rows，
Scrollem，
contentElem，
});
this.clusterize.html=（模板）=>{
contentElem.innerHTML=模板；
const instance=new Vue（{el:contentElem}）；
实例。$slots=此。$slots；
实例。$scopedSlots=此。$scopedSlots；
实例。$mount（）；
console.log（实例$scopedSlots）；//空
console.log（instance.$slots）//不为空
};
},
};

组件.vue

<clusterize :items="test">
  <template slot-scope="props">
    item
  </template>
</clusterize>

项目

问题是，如果它不使用作用域插槽，它可以完美地工作，但我真的需要使用它们，否则组件就没有任何意义

我将感谢任何帮助或建议。

---

提前非常感谢。

这个问题应该是由于多次将不同的Vue实例装载到同一个

el

（请查看第二个演示，您不应该将多个实例装载到同一个元素上，）

我的解决方案：在空中创建Vue实例（不绑定到

el

），然后将

vm.$el

作为输出

请查看下面的简单演示，

Vue.config.productionTip=false
Vue.component（'clusterize'{
模板：`
标题
加载。。。
`,
道具：{
项目：{
类型：数组，
要求：正确，
},
},
数据（）{
返回{
clusterize:null，
clusterVueInstance:空
};
},
计算：{
行（）{
返回此.items.map（item=>{
返回“”+项目+“”
});
},
},
观察：{
行（）{
this.clusterize.update（this.rows）；
},
},
安装的（）{
const scrollem=this.$refs.scroll；
const contentElem=此。$refs.content；
this.clusterize=新的clusterize({
rows:this.rows，
Scrollem，
contentElem，
});
this.clusterize.html=（模板）=>{
this.clusterize.content\u elem.innerHTML=模板；
if（此.clusterVueInstance）{
此.clusterVueInstance.$destroy（）
this.clusterVueInstance=null
}
this.clusterVueInstance=新的Vue（{template:''+template+''}）
//或者使用Vue.extend（）
this.clusterVueInstance.$slots=this.$slots
this.clusterVueInstance.$scopedSlots=this.$scopedSlots
此.clusterVueInstance.$mount（）
this.clusterize.content\u elem.innerHTML=this.clusterVueInstance.$el.innerHTML
//console.log（this.clusterVueInstance.$scopedSlots）；//空
//console.log（this.clusterVueInstance.$slots）//不为空*/
};
}
})
app=新Vue({
el:“应用程序”，
数据（）{
返回{
测试：[“穿靴子的猫”、“测试1”、“测试2”]，
索引：0
}
},
挂载：函数（）{
//this.test=['Puss In Boots'，'test 1'，'test 2']
},
方法：{
附加项：函数（）{
this.test.push（`test`+this.index++）
}
}
})

添加项
项目：{{props.item}

能否提供复制品（）？