Javascript 加载vue组件并获取HTML作为fullcalendar的字符串

我正在我的Vue应用程序中使用

在fullcalendar中，我使用eventRender操作日历项的显示

eventRender: function(event, element) {
      let eventDetails = "<div style='background-color:black'>"+event.title+"</div>";
      element.find(".fc-title").html(eventDetails);
    }

eventRender:function（事件，元素）{
让eventDetails=“”+event.title+”；
element.find（“.fc title”）.html（eventDetails）；
}

我不想像上面那样创建一个字符串模板，而是想使用一个Vue组件作为模板，向它传递事件数据，并为fullcalendar中显示的日历条目获取一个HTML字符串

我正试图弄清楚如何做，但无法弄清楚如何加载组件、传递数据和获取HTML字符串

我已经设置了一个代码沙盒，希望有人能帮助我。在“组件”文件夹中，您将找到Calendar.vue（fullcalendar）和EventDetails.vue（用作模板的组件）

---

导入组件并从中创建类

import EventDetails from "/components/EventDetails.vue";
var EventDetailsClass = Vue.extend(EventDetails);

然后在eventRender回调中创建类的实例，传递数据并获取HTML字符串

eventRender: (event, element) => {
          /** load EventDetails-component and pass data to component */
          /** return HTML-string from component */
          let EventDetailsInstance = new EventDetailsClass();
          EventDetailsInstance.setEvent(event);
          EventDetailsInstance.$mount();

          let eventHTML = EventDetailsInstance.$el.outerHTML;
          element.find(".fc-title").html(eventHTML);
        }

---

可以在此处找到演示

导入组件并从中创建类

import EventDetails from "/components/EventDetails.vue";
var EventDetailsClass = Vue.extend(EventDetails);

然后在eventRender回调中创建类的实例，传递数据并获取HTML字符串

eventRender: (event, element) => {
          /** load EventDetails-component and pass data to component */
          /** return HTML-string from component */
          let EventDetailsInstance = new EventDetailsClass();
          EventDetailsInstance.setEvent(event);
          EventDetailsInstance.$mount();

          let eventHTML = EventDetailsInstance.$el.outerHTML;
          element.find(".fc-title").html(eventHTML);
        }

---

演示可以在这里找到

对此也感兴趣，因为我将在未来几个月内完成这项工作！快速搜索结果：

您可以使用它。$el.outerHTML。您还可以使用此.$refs.child.$el.outerHTML获取子对象的HTML我还没有使用fullcalendar，但我发现它们确实与Vue集成。我想他们会为你想要的工作提供一些道具或职位。也许你需要对他们的文档进行更深入的研究：。示例代码：。找到了一种方法。请看我的回答，我对此也很感兴趣，因为我将在未来几个月内完成这项工作！快速搜索结果：
您可以使用它。$el.outerHTML。您还可以使用此.$refs.child.$el.outerHTML获取子对象的HTML我还没有使用fullcalendar，但我发现它们确实与Vue集成。我想他们会为你想要的工作提供一些道具或职位。也许你需要对他们的文档进行更深入的研究：。示例代码：。找到了一种方法。看到我的答案了吗