vue.js - 在 sweetalert2 内容中使用 vue3 组件

Question

我正在尝试在 Sweetalert2 模态中使用 Vue3 组件。它会是这样的：

<template>
  <div id="test-component">
    <h1>Yeey!</h1>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
};
</script>

测试组件.vue

并在其他组件中使用 sweetalert 模态，例如：

<script>
import Swal from "sweetalert2";
import TestComponent from "@/components/TestComponent";

export default {
  name: "OtherComponent",
  methods: {
    clickAction() {
      Swal.fire({ html: '<TestComponent />' });
    }
  }
};
</script>

我什至不知道这是否可能，但我看到了几个使用 Vue2 的例子，所以我想弄清楚如何在 Vue3 上做到这一点。

这样做，sweetalert 显示为空，并且在内部swal2-html-container有：

<div class="swal2-html-container" id="swal2-html-container" style="display: block;">
  <testcomponent></testcomponent>
</div>

无需渲染实际组件。