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

首先，我们需要创建两个组件来展示热播电影和经典电影，可以分别命名为 'HotMovies' 和 'ClassicMovies'。

'HotMovies' 组件可以使用以下代码来展示热播电影：

<template>
  <div>
    <h2>热播电影</h2>
    <ul>
      <li v-for='movie in hotMovies'>{{ movie.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotMovies: [
        { title: '复仇者联盟4：终局之战' },
        { title: '阿凡达2' },
        { title: '星际穿越' }
      ]
    };
  }
};
</script>

'ClassicMovies' 组件可以使用以下代码来展示经典电影：

<template>
  <div>
    <h2>经典电影</h2>
    <ul>
      <li v-for='movie in classicMovies'>{{ movie.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classicMovies: [
        { title: '肖申克的救赎' },
        { title: '教父' },
        { title: '泰坦尼克号' }
      ]
    };
  }
};
</script>

接下来，我们需要在父组件中动态切换这两个组件。可以使用一个按钮来触发切换，代码如下：

<template>
  <div>
    <button @click='toggleMovies'>切换电影</button>
    <component :is='currentComponent'></component>
  </div>
</template>

<script>
import HotMovies from './HotMovies.vue';
import ClassicMovies from './ClassicMovies.vue';

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

在父组件中，我们使用了一个按钮来触发 'toggleMovies' 方法。这个方法会动态切换 'currentComponent' 的值，从而切换当前展示的组件。这里使用了一个三元表达式来判断当前是展示热播电影还是经典电影。

最后，我们需要在 'App.vue' 中引入父组件，代码如下：

<template>
  <div id='app'>
    <MovieSwitcher />
  </div>
</template>

<script>
import MovieSwitcher from './components/MovieSwitcher.vue';

export default {
  components: {
    MovieSwitcher
  }
};
</script>

这样，我们就可以在应用中实现热播电影和经典电影之间的切换了。