Javascript 在数据中呈现vue组件

我试图为apexcharts创建自定义工具提示，如示例所示：

工具提示：{
自定义：函数（{series，seriesIndex，dataPointIndex，w}）{
返回“”+
''+系列[系列索引][数据点索引]+''+
''
}
}

这是可行的，但当我返回一些vue组件时，什么也看不出来

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<MyComponent/>'
  }
}

工具提示：{
自定义：函数（{series，seriesIndex，dataPointIndex，w}）{
返回“”
}
}

只是简单的组件
导出默认值{name:“MyComponent”}

---

为什么会发生这种情况以及如何修复？

要使Vue正确渲染组件，必须在自定义工具提示功能中告诉它：

tooltip: {
  custom: ({series, seriesIndex, dataPointIndex, w}) => {
    // create component constructor
    var TooltipComponent = Vue.extend({
      template: '<my-component/>'
    });
    // create an instance of tooltip and mount it
    var tooltip = new TooltipComponent();
    tooltip.$mount();
    // Return the html
    return tooltip.$el.outerHTML;
  }
}

工具提示：{
自定义：（{series，seriesIndex，dataPointIndex，w}）=>{
//创建组件构造函数
var TooltipComponent=Vue.extend({
模板：“”
});
//创建工具提示的实例并装载它
var tooltip=新的TooltipComponent（）；
工具提示。$mount（）；
//返回html
返回工具提示。$el.outerHTML；
}
}

---

如果您需要数据或其他信息，它会变得有点复杂，请参阅以获取更多信息。

这可能是因为vue没有呈现工具提示。您需要为自定义工具提示提供将返回组件的vue渲染函数。然而，如果没有一个简单的代码示例来说明您试图实现的目标，那么很难提供帮助。@PaulBollerman，好的，我添加了一个简单的示例。您能演示一下如何渲染它吗？您是否尝试过引用带有烤肉串盒的组件？例如？答案见@PaulBollerman，thx。我试过了，但没用

<template>
   <div>Just simple component</div>
</template>

<script>
export default { name: "MyComponent" }
</script>

tooltip: {
  custom: ({series, seriesIndex, dataPointIndex, w}) => {
    // create component constructor
    var TooltipComponent = Vue.extend({
      template: '<my-component/>'
    });
    // create an instance of tooltip and mount it
    var tooltip = new TooltipComponent();
    tooltip.$mount();
    // Return the html
    return tooltip.$el.outerHTML;
  }
}