vue调用其他组件中的video

要在 Vue 中调用其他组件中的 video，需要先在被调用的组件中将其暴露出来。可以使用 props 将 video 作为组件的一个属性传递给父组件，然后再在父组件中使用该属性。

例如，假设我们有一个名为 "video-player" 的组件，其中包含一个 video 元素：

<template>
  <div>
    <video ref="videoRef">
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  name: "video-player",
  data() {
    return {
      // ...
    };
  },
  methods: {
    // ...
  },
};
</script>

现在，我们想在另一个组件中使用 "video-player" 组件中的 video。我们可以将 video 作为一个 props 传递给新组件：

<template>
  <div>
    <video :src="videoSrc" ref="videoRef"></video>
  </div>
</template>

<script>
export default {
  name: "video-viewer",
  props: {
    videoSrc: {
      type: String,
      required: true,
    },
  },
  mounted() {
    // 在组件挂载后，通过 $refs 访问 video 元素
    const video = this.$refs.videoRef;
    // ...
  },
};
</script>

在上面的例子中，我们创建了一个名为 "video-viewer" 的新组件，并将 "video-player" 组件中的 video 作为 props 传递给它。在 "video-viewer" 组件中使用了该 props 来设置 video 元素的 src 属性，并通过 $refs 访问该元素进行操作。

需要注意的是，由于 video 是一个 HTML5 元素，它的操作需要在 mounted 钩子函数中进行，因为在该钩子函数中，组件已经被渲染到了 DOM 中。