vue使用document.querySelector调用其他组件中的video

在 Vue 中使用 `document.querySelector` 来调用其他组件中的 video 不是一个好的做法，因为 Vue 是一个组件化的框架，它的核心思想是将应用程序拆分成多个小组件，每个组件都有自己的状态和行为。这种方式破坏了组件的隔离性，会导致代码难以维护和测试。

如果需要在 Vue 中操作其他组件中的 video，可以通过 `refs` 属性来引用该组件。例如，假设我们有一个名为 `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-player` 组件中定义一个 `ref`：

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

<script>
export default {
  name: "video-player",
  data() {
    return {
      // ...
    };
  },
  methods: {
    // ...
  },
  mounted() {
    // 在组件挂载后，通过 $refs 访问 video 元素
    const video = this.$refs.videoRef;
    // ...
  },
};
</script>

在另一个组件中，我们可以通过 `$refs` 来访问 `video-player` 组件中的 video：

<template>
  <div>
    <video ref="videoPlayer"></video>
  </div>
</template>

<script>
export default {
  name: "video-viewer",
  mounted() {
    const videoPlayer = this.$refs.videoPlayer.$refs.videoRef;
    // ...
  },
};
</script>

在上面的例子中，我们在 `video-player` 组件中定义了一个名为 `videoRef` 的 `ref`，然后在另一个组件中通过 `$refs` 访问 `video-player` 组件，并使用 `$refs.videoRef` 来访问其中的 video 元素。