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

【问题标题】：Load vue component and get HTML as string for fullcalendar加载 vue 组件并获取 HTML 作为 fullcalendar 的字符串
【发布时间】：2020-07-24 17:56:55
【问题描述】：

我在我的 Vue 应用程序中使用 https://fullcalendar.io/。

在 fullcalendar 中，我使用 eventRender 来操作日历条目的显示。

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

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

我试图弄清楚如何做，但不知道如何加载组件、传递数据并返回 HTML 字符串。

我已经设置了一个密码箱，希望有人可以帮助我。在“组件”文件夹中，您将找到 Calendar.vue (fullcalendar) 和 EventDetails.vue (用作模板的组件)。

https://codesandbox.io/s/vue-fullcalendar-example-vzwlo

【问题讨论】：

对此也很感兴趣，因为我将在接下来的几个月里做这件事！快速搜索出现了这些结果：You can use this.$el.outerHTML. You can also use this.$refs.child.$el.outerHTML to get the HTML of a child.
我还没有使用 fullcalendar，但我发现它们确实与 Vue 集成。我认为他们会为您想要的工作提供一些道具或插槽。也许您需要在他们的文档中进行更深入的研究：fullcalendar.io/docs/vue。示例代码：github.com/fullcalendar/fullcalendar-example-projects/blob/….
找到了方法。看我的回答

标签： javascript vue.js vuejs2 fullcalendar

【解决方案1】：

导入组件并从中创建一个类

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

然后在 eventRender-callback 创建类的实例，传递数据并获取 HTML-string

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);
        }

演示可以在这里找到https://codesandbox.io/s/vue-fullcalendar-example-pqctv

【讨论】：