Vue实现内部组件轮播切换效果的示例代码

对于那些不需要路由的内部组件，在切换的时候希望增加一个轮播过渡的效果，效果如下：

我们可以引入一个轮播组件，但是有个问题，通常轮播组件都会把所有的slide都渲染出来再进行切换，这样就导致所有的资源都会触发加载，这可能不是我们所期待的，毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了。所以我们可以手动简单地写一个，满足需求即可。

现在一步步来实现这个功能，先写一个实现基本切换的demo.

1. 实现切换

先用vue-cli搭建一个工程脚手架，使用以下命令：

npm install -g vue-cli
vue init webpack slide-demo # 运行后router等都选择no

这样就搭了一个webpack + vue的工程，进入slide-demo目录，查看src/App.vue，这个文件是初始化工具提供的，是整个页面的组件。还有一个src/components目录，这个是放子组件的目录。

在这个目录里面新建3个组件：task-1.vue、task-2.vue、task-3.vue，然后在App.vue里面import进来，如下App.vue所示：

<script>
// import HelloWorld from './components/HelloWorld'
import Task1 from "./components/task-1";
import Task2 from "./components/task-2";
import Task3 from "./components/task-3";
 
export default {
  name: 'App',
  components: {
    Task1,
    Task2,
    Task3
  }
}
</script>

我们的数据格式questions是这样的：

[{index: 1, type: 1, content: ''}, {index: 2, type: 1, content: ''},
{index: 3, type: 2, content: ''}, {index: 4, type: 3, content: ''}]

它是一个数组，数组里的每个元素代表每道题，每道题都有一个类型，如选择题、填空题、判断题等，分别对应上面的task-1、task-2、task-3，我们用一个currentIndex变量表示当前是在哪道题，初始化为0，如下代码所示（添加到App.vue里面）：

  data() {
    return {
      currentIndex: 0
    };
  },
  created() {
    // 请求question数据
    this.questions = [
      {index: 1, type: 1, question: ''}, /*...*/];
  },

通过改变currentIndex的值，从而切到一下题即下一个组件，要怎么实现这个切换的效果呢？

可以使用Vue自定义的一个全局组件component，给合它的is属性，达到动态改变组件的目的，如下代码所示：

<template>
<div id="app">
  <div class="task-container">
    <component :is="'task-' + questions[currentIndex].type" 
    </component>
  </div>
</div>
</template>

当currentIndex增加时，就会改变:is里面的值，依次从task-1变到task-2、task-3等，这样component就会换成相应的task组件。