Vue.js 动态组件实现影视网热播电影和经典电影切换

<template>
  <div>
    <button @click='toggleHot'>热播电影</button>
    <button @click='toggleClassic'>经典电影</button>
    <component :is='currentComponent'></component>
  </div>
</template>
<script>
import HotMovies from './HotMovies'
import ClassicMovies from './ClassicMovies'

export default {
  components: {
    HotMovies,
    ClassicMovies
  },
  data() {
    return {
      currentComponent: 'HotMovies'
    }
  },
  methods: {
    toggleHot() {
      this.currentComponent = 'HotMovies'
    },
    toggleClassic() {
      this.currentComponent = 'ClassicMovies'
    }
  }
}
</script>