vue3 vue-video-player动态重新加载组件

你可以使用Vue的key属性来强制重新渲染组件。当key的值改变时，组件会被销毁并重新创建。因此，你可以在需要重新加载组件时，通过修改key的值来实现。

以下是一个示例代码：

<template>
  <div :key="videoKey">
    <video-player ref="player" :options="options"></video-player>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      videoKey: 0,
      options: {
        // options here
      }
    }
  },
  methods: {
    reload() {
      // 在这里修改key的值来重新加载组件
      this.videoKey++
    }
  }
}
</script>

在这个示例中，我们将key属性绑定到一个包含video-player组件的div元素上。当需要重新加载组件时，我们只需要通过修改videoKey的值来实现。在reload方法中，我们将videoKey加1，这将导致组件被销毁并重新创建，从而实现动态重新加载组件的效果。