如何根据时间动态更改Vue组件？通过改变，我的意思是一个替换另一个像在旋转木马中

Question

我希望我的Vue网站上的一些小部件每n秒更换一次。存档这个的最佳方法是什么？通过改变，我的意思是一个替换另一个像在旋转木马中。

Answer 1

这是一个CodeSandbox的例子。

您可以通过设置间隔和绑定dynamic components来更改显示的窗口小部件（re：component）。

<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>