Vue.js 如何根据时间动态更改Vue组件？我所说的改变，是指一个代替另一个，就像在旋转木马中一样

我希望Vue网站中的一些小部件每n秒更改一次。归档此文件的最佳方式是什么？我所说的改变是指一个代替另一个，就像在旋转木马中一样。

这里是一个例子

您可以通过设置间隔和绑定来更改显示的小部件（re:component）

从“/components/ComponentA”导入组件A；
从“/components/ComponentB”导入组件B；
从“/components/ComponentC”导入ComponentC；
导出默认值{
名称：“应用程序”，
组成部分：{
成分a，
组件B，
成分C
},
数据（）{
返回{
比率：5，
活动：“组件a”，
间隔：空，
组件：[‘组件a’、‘组件b’、‘组件c’]
}
},
挂载（）{
this.interval=setInterval（this.rotate.bind（this）、this.rate）
},
方法：{
旋转（）{
const index=this.components.findIndex（component=>component==this.active）
this.active=（（index+1）==this.components.length）？this.components[0]：this.components[index+1]
}
}

就目前而言，这个问题太宽泛了。基本上，您需要以某种方式调整应用程序的状态，视图将相应地重新绘制。要了解更多详细信息，请在问题中显示更多详细信息。

<template>
  <component :is="active"></component>
</template>

<script>
  import ComponentA from "./components/ComponentA";
  import ComponentB from "./components/ComponentB";
  import ComponentC from "./components/ComponentC";

  export default {
    name: "App",
    components: {
      ComponentA,
      ComponentB,
      ComponentC
    },
    data () {
      return {
        rate: 5,
        active: 'component-a',
        interval: null,
        components: ['component-a', 'component-b', 'component-c']
     }
   },
   mounted () {
     this.interval = setInterval(this.rotate.bind(this), this.rate)
   },
   methods: {
     rotate () {
       const index = this.components.findIndex(component => component === this.active)

       this.active = ((index + 1) === this.components.length) ? this.components[0] : this.components[index + 1]
     }
   }
</script>