Vue自定义组件TextModuleComponent在Swal.fire中无法正常渲染如何解决

核心原因 #

SweetAlert2 的 html 配置项仅接收纯 HTML 字符串，插入的内容不会经过 Vue 的模板编译流程，因此写在字符串里的自定义组件标签只会被识别为普通未知 HTML 标签，不会被渲染为对应的 Vue 组件内容。你之前尝试的在 Vue 实例 beforeCreate 钩子中调用 Swal 的写法也不会生效，因为此时 Vue 实例还未完成初始化，且 Swal 插入的 DOM 依然没有走当前 Vue 实例的编译逻辑。

解决方案 #

通过先将 Vue 组件编译为真实 DOM 节点，再通过 Swal 的生命周期钩子插入到弹窗中即可，具体代码示例如下：

import TextModuleComponent from "../components/TextModuleComponent";

// 生成组件构造器
const TextModuleConstructor = Vue.extend(TextModuleComponent);
// 实例化组件并完成挂载，得到编译后的真实DOM
const textModuleInstance = new TextModuleConstructor({
  // 如有需要传递的props，可在这里配置
  propsData: {
    // prop名: 对应值
  }
}).$mount();

Swal.fire({
  title: 'Das Angebot per E-Mail versenden?',
  html: `
    <input class="swal2-input" placeholder="Empfänger E-Mail Adresse..." id="email" type="email">
    <input class="swal2-input" id="header" placeholder="Betreff..." type="text">
    <!-- 给组件预留占位容器 -->
    <div id="text-module-container"></div>
    <textarea class="swal2-textarea"></textarea>
  `,
  showConfirmButton: true,
  showDenyButton: true,
  confirmButtonText: 'Senden',
  denyButtonText: 'Nein',
  confirmButtonColor: '#2E8B57',
  icon: 'question',
  focusConfirm: false,
  preConfirm: () => ({
    email: $('#email').val(),
    header: $('#header').val()
  }),
  // 弹窗DOM渲染完成后插入组件节点
  didOpen: () => {
    document.querySelector('#text-module-container').appendChild(textModuleInstance.$el);
  },
  // 弹窗关闭前销毁组件实例，避免内存泄漏
  willClose: () => {
    textModuleInstance.$destroy();
  }
})

如果你是用全局注册的text-module-component组件，也可以直接用该构造方法创建实例，不需要单独引入组件文件。

注意事项 #

• 如果需要和组件进行数据交互，可以直接操作实例的属性、调用实例方法即可
• 不要直接将组件的kebab-case/camelCase标签写在Swal的html字符串中，该场景下没有Vue的编译环境，无法识别自定义标签

内容的提问来源于stack exchange，提问作者Elias