参考：vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

动态组件

在不同组件之间进行动态切换

比如：选项卡，点击不同的tab显示相应的组件。
注意：页面上只有当前选择的组件，而不是把所有的组件都列在页面上。

通过给组件添加 is 特性来实现。

如图

代码

html:

<!-- button按钮 -->
<div class="tabs">
	<button @click="toggleTab('tab1')">标签一</button>
	<button @click="toggleTab('tab2')">标签二</button>
	<button @click="toggleTab('tab3')">标签三</button>
</div>

<!-- 动态显示的组件：is绑定当前显示的组件，curTab改变时tab1会变成其他组件，tab2或tab3 -->
<tab1 :is="curTab"></tab1>

js:

Vue.component('tab1', {
	data() {
		return {
			message: '标签一的内容'
		}
	},
	template: '<div class="tab-pane"><input type="checkbox" />{{ message }}</div>'
})
// 如上，再注册两个组件：tab2 和 tab3

new Vue({
	el: '#app',
	data: {
		// 当前显示的组件
		curTab: 'tab1' 
	},
	methods: {
		// 点击标签按钮，改变当前显示组件
		toggleTab(tab) {
			this.curTab = tab
		}
	}
})

问题

按照如下步骤操作：选中 tab1 标签的 checkbox -> 切换到 tab2 标签 -> 再切换回 tab1 标签，checkbox 又变成了未选中状态。

这是因为你每次切换新标签的时候，Vue 都创建了一个新的 curTab 实例。

keep-alive

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

代码

将上面代码的：

<tab1 :is="curTab"></tab1>

替换为：

<keep-alive>
	<tab1 :is="curTab"></tab1>
</keep-alive>

现在再来回切换 tab 标签，checkbox 的状态都将被缓存了。

UI 框架的 Tabs 组件（iView）

UI 框架的 Tabs 组件是已经做了缓存封装，所以不用我们再去用 keep-alive 包裹组件了。

例子

html:

<Tabs value="name1">
   <tab-pane class="tab-pane" label="标签一" name="name1">
    	<p>标签一的内容</p>
    	<Checkbox v-model="single1">Checkbox</Checkbox>
    </tab-pane>
    <tab-pane class="tab-pane" label="标签二" name="name2">
    	<p>标签二的内容</p>
    	<Checkbox v-model="single2">Checkbox</Checkbox>
    </tab-pane>
    <tab-pane class="tab-pane" label="标签三" name="name3">
    	<p>标签三的内容</p>
    	<Checkbox v-model="single3">Checkbox</Checkbox>
    </tab-pane>
</Tabs>

js:

new Vue({
	el: '#app',
	data: {
		single1: false,
		single2: false,
		single3: false
	},
	methods: {
	
	}
})

同样能够缓存 checkbox 状态，以上。