Laravel+Vue+Inertia+Vite中动态加载Teleport弹窗的问题

错误原因 #

直接动态导入Teleport组件时，组件渲染阶段Vue无法找到Teleport指定的目标父节点，或是组件实例化时机与DOM节点准备状态不匹配，从而抛出Cannot read properties of undefined (reading 'parentNode')错误。

方案一：使用<Suspense>配合异步组件（Vue 3 推荐） #

通过Vue的<Suspense>组件处理异步组件的加载状态，同时用状态变量控制组件是否渲染，核心是确保Teleport目标节点提前存在。

1. 在页面根模板（如Laravel的app.blade.php）中添加Teleport目标容器：

<div id="modal-container"></div>

2. 修改Pricing.vue组件：

<template>
  <div>
    <button @click="openModal">打开结算弹窗</button>
    
    <!-- 仅在isOpen为true时渲染异步组件，Suspense处理加载状态 -->
    <Suspense v-if="isOpen">
      <CheckoutModalPaper @close="isOpen = false" />
      <template #fallback>
        <div class="loading">加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isOpen = ref(false);
// 定义异步组件，仅在需要时触发加载
const CheckoutModalPaper = () => import('@/components/CheckoutModalPaper.vue');

function openModal() {
  isOpen.value = true;
}
</script>

3. 调整CheckoutModalPaper.vue的Teleport配置：

<template>
  <!-- 指向提前创建的目标容器 -->
  <Teleport to="#modal-container">
    <div class="modal-overlay">
      <div class="modal-content">
        <!-- 弹窗内容 -->
        <button @click="$emit('close')">关闭</button>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
defineEmits(['close']);
</script>

方案二：手动挂载异步组件（灵活控制生命周期） #

不依赖模板渲染，通过Vue的createApp手动加载并挂载组件到目标容器，弹窗关闭后直接卸载组件释放资源。

1. 同样提前添加Teleport目标容器（同方案一步骤1）

2. 修改Pricing.vue组件：

<template>
  <div>
    <button @click="openModal">打开结算弹窗</button>
  </div>
</template>

<script setup>
import { createApp } from 'vue';

async function openModal() {
  // 动态导入组件
  const { default: CheckoutModalPaper } = await import('@/components/CheckoutModalPaper.vue');
  // 获取目标容器DOM节点
  const container = document.getElementById('modal-container');
  
  // 创建组件实例并挂载，传入关闭回调
  const modalApp = createApp(CheckoutModalPaper, {
    onClose: () => {
      // 关闭弹窗时卸载组件
      modalApp.unmount();
    }
  });
  
  modalApp.mount(container);
}
</script>

3. 简化CheckoutModalPaper.vue（无需Teleport，直接渲染内容）：

<template>
  <div class="modal-overlay">
    <div class="modal-content">
      <!-- 弹窗内容 -->
      <button @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script setup>
defineEmits(['close']);
</script>

关键注意事项 #

• 必须确保Teleport的目标节点在页面初始化时就存在，不要动态创建该节点，否则Vue无法找到对应DOM元素。
• 方案一依赖Vue 3的<Suspense>特性，Laravel+Inertia+Vue 3的技术栈完全兼容该特性。
• 方案二更适合需要精细管理组件生命周期的场景，比如频繁打开关闭弹窗时，能及时释放资源。

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