Vue.js中Iframe动态渲染异常问题求助

核心问题 #

你当前的写法完全违背Vue响应式机制：

• 计算属性不能接收参数，你定义的videoRemoved(boolean)是错误写法——Vue计算属性是基于响应式依赖自动推导的，不是可传参的普通函数。
• 父组件直接调用LightboxVideo.computed.videoRemoved(false)完全无效，这只是调用了一个孤立函数，既不触发组件实例的响应式更新，也无法关联到具体的组件DOM。

修复步骤 #

1. 重构LightboxVideo组件 #

将控制显示的逻辑改为基于props的响应式变量，移除错误的计算属性：

<template>
  <!-- 直接用props控制显示状态 -->
  <div v-if="showVideo" class="relative w-full max-w-screen-lg mx-4 aspect-video">
    <iframe
      ref="videoPlayer"
      :src="showVideo ? item.src : ''" <!-- 隐藏时清空src，避免资源浪费/后台播放 -->
      title="Videoplayer"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      class="absolute inset-0 w-full h-full"
    />
  </div>
</template>

<script>
export default {
  name: 'LightboxVideo',
  props: {
    item: {
      type: Object,
      default: () => null,
    },
    // 新增props：控制视频是否显示
    showVideo: {
      type: Boolean,
      default: false
    }
  },
  // 监听显示状态，隐藏时强制停止视频
  watch: {
    showVideo(newVal) {
      if (!newVal && this.$refs.videoPlayer) {
        this.$refs.videoPlayer.src = ''
      }
    }
  }
}
</script>

2. 修改父组件UiLightbox逻辑 #

父组件通过绑定props传递显示状态，而非直接操作子组件的计算属性：
首先在data中新增控制视频显示的状态：

data() {
  return {
    open: false,
    currentIndex: 0,
    carouselSettings: {
      itemsToShow: 1,
      itemsToScroll: 1,
      wrapAround: true,
      snapAlign: 'center',
    },
    // 新增状态：控制当前视频的显示/隐藏
    currentVideoVisible: false
  }
}

然后修改start/stopVideo方法：

methods: {
  // ...其他方法保留不变
  stopVideo() {
    this.currentVideoVisible = false
  },
  startVideo() {
    this.currentVideoVisible = true
  },
}

最后在父组件模板中给LightboxVideo绑定props：

<!-- 假设你在轮播Slide中使用LightboxVideo -->
<Slide v-for="(item, index) in items" :key="index">
  <LightboxVideo :item="item" :show-video="currentVideoVisible" />
</Slide>

额外优化建议 #

• 轮播切换时，可在切换事件中自动调用stopVideo，切换到视频项时再调用startVideo，避免多视频同时播放。
• 关闭lightbox时的stopVideo调用已正确，无需修改。

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