Vue2中如何跨两个父组件复用同一<MyVideo>组件实例？

你的核心需求是复用同一个<MyVideo>组件实例（避免WebGL播放器状态重置、重复初始化带来的性能损耗），下面先分析你现有方案的问题，再给出可行的实现方式：

现有方案问题分析 #

• 方案1：使用v-if切换父组件时，<section-1>和<section-2>会被销毁重建，导致内部的<MyVideo>也跟着销毁并创建新实例，状态完全重置，不符合需求。
• 方案2：直接传递组件实例作为props时，由于Vue组件实例本身包含大量循环引用的属性（比如$parent、$children、$refs等），在响应式系统处理或序列化过程中会触发「循环对象值」错误，这种方式不可行。

可行实现方案 #

方案一：Vue3 使用 Teleport 动态切换挂载目标 #

Teleport 可以将组件的DOM元素动态移动到指定的DOM节点下，而组件实例本身不会被销毁，完美适配你的场景：

<template>
  <!-- 定义两个section，各自预留挂载容器 -->
  <section-1 v-if="page === 1" id="section-video-target-1"></section-1>
  <section-2 v-if="page === 2" id="section-video-target-2"></section-2>

  <!-- 动态指定Teleport的目标容器 -->
  <teleport :to="`#section-video-target-${page}`">
    <MyVideo ref="vidPlayer" />
  </teleport>
</template>

<script setup>
import { ref } from 'vue'
import MyVideo from './MyVideo.vue'
import Section1 from './Section1.vue'
import Section2 from './Section2.vue'

const page = ref(1)

// 切换page时，Teleport会自动将MyVideo的DOM移动到对应section的容器中，实例保持不变
const switchPage = () => {
  page.value = page.value === 1 ? 2 : 1
}
</script>

方案二：手动控制组件挂载与DOM移动（Vue2/Vue3通用） #

通过手动创建组件实例、控制DOM元素的挂载位置，完全掌握实例的生命周期：

<template>
  <section-1 v-if="page === 1" ref="section1"></section-1>
  <section-2 v-if="page === 2" ref="section2"></section-2>
</template>

<script>
import MyVideo from './MyVideo.vue'
import Section1 from './Section1.vue'
import Section2 from './Section2.vue'

export default {
  components: { Section1, Section2 },
  data() {
    return {
      page: 1,
      vidPlayerInstance: null
    }
  },
  mounted() {
    // 手动创建并挂载MyVideo实例（不通过模板渲染）
    this.vidPlayerInstance = new MyVideo({
      // 如需传递props，在这里通过propsData传入（Vue2），Vue3用props选项
      propsData: {}
    }).$mount()

    // 初始将播放器DOM挂载到section1
    this.$refs.section1.$el.appendChild(this.vidPlayerInstance.$el)
  },
  watch: {
    page(newPage) {
      // 先移除当前DOM元素
      this.vidPlayerInstance.$el.remove()
      // 挂载到新的section容器中
      const targetSection = newPage === 1 ? this.$refs.section1 : this.$refs.section2
      targetSection.$el.appendChild(this.vidPlayerInstance.$el)
    }
  },
  beforeUnmount() {
    // 页面销毁时手动销毁播放器实例，避免内存泄漏
    this.vidPlayerInstance?.$destroy()
  }
}
</script>

方案三：结合 keep-alive 与插槽分发 #

将<MyVideo>放在更高层级，通过插槽分发到不同的section中，利用keep-alive缓存实例：

<template>
  <div>
    <section-1 v-if="page === 1">
      <slot name="video"></slot>
    </section-1>
    <section-2 v-if="page === 2">
      <slot name="video"></slot>
    </section-2>

    <!-- keep-alive 确保组件实例不被销毁 -->
    <keep-alive>
      <MyVideo ref="vidPlayer" slot="video" />
    </keep-alive>
  </div>
</template>

这种方式要求<section-1>和<section-2>组件内部定义了对应名称的插槽，切换page时，<MyVideo>的实例会被keep-alive缓存，仅DOM位置随插槽分发变化。

核心思路总结 #

所有可行方案的核心都是避免组件实例被销毁，同时动态调整它的DOM挂载位置，这样就能保留WebGL播放器的状态和性能，实现跨父组件的实例复用。

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