动态调用video,js组件并传参

要动态调用 `video` 组件并传参，可以使用 Vue 的动态组件功能。

下面是一个示例，假设您有两个 `video` 组件：`Player1` 和 `Player2`。我们可以使用一个动态组件来根据条件渲染特定的组件，并将参数传递给子组件。

<template>
  <div>
    <component :is="currentPlayer" :src="videoSrc"></component>
  </div>
</template>

<script>
import Player1 from './Player1.vue';
import Player2 from './Player2.vue';

export default {
  data() {
    return {
      currentPlayer: '',
      videoSrc: ''
    };
  },
  components: {
    Player1,
    Player2
  },
  methods: {
    playVideo(src, player) {
      // 根据传入的 player 参数来决定渲染哪个组件
      this.currentPlayer = player;
      this.videoSrc = src;
    }
  }
};
</script>

在这个例子中，我们使用 `component` 元素来动态渲染组件。通过 `v-bind:is` 属性绑定了一个变量 `currentPlayer`，根据这个变量的值，可以动态渲染 `Player1` 或 `Player2` 组件。我们还通过 `v-bind:src` 属性将 `videoSrc` 变量传递给子组件。

在 `methods` 中，我们定义了一个 `playVideo` 方法，用于播放视频。这个方法接受两个参数：视频的源地址和要渲染的播放器组件。在方法内部，我们根据传入的参数来设置 `currentPlayer` 和 `videoSrc` 变量，从而渲染特定的组件。

这样，在应用中，我们可以调用 `playVideo` 方法来播放视频：

this.playVideo('http://example.com/video.mp4', 'Player1');

这样就会渲染 `Player1` 组件，并且将视频源地址传递给子组件。