vue 动态组件的使用

动态挂载组件

在div、component等标签上使用:is来绑定挂载的组件名。

<template>
	<div id="">
<div class="typeAll">
			<div :class="['first',currentTab=='staff'?'active':'type']" ref="staff" @click="toggleTab('staff')">职员</div>
			<div :class="[currentTab=='supplier'?'active':'type']" ref="supplier" @click="toggleTab('supplier')">供应商</div>
			<div :class="[currentTab=='terminal'?'active':'type']" ref="terminal" @click="toggleTab('terminal')">哑终端</div>
		</div>
		<!--根据currentTab的值，来动态的引用不同的组件内容-->
		<div :is="currentTab" keep-alive></div>
	</div>
</template>

<script>
	// 引入子组件
	import Bus from '@/js/bus';
	import staff from '@/views/choose/Staff';
	import supplier from '@/views/choose/Supplier';
	import terminal from '@/views/choose/Terminal';
	export default {
		name: 'app',
		data() {
			return {
				currentTab: '' // currentTab 用于标识当前触发的子组件
			};
		},
		components: { // 声明子组件
			staff,
			supplier,
			terminal
		},
		methods: {
			toggleTab: function(tab) {
				this.currentTab = tab; // tab 为当前触发标签页的组件名
			}
		}
	}
</script>
<style>
		.type {
		display: inline-block;
		/*float: left;*/
		width: 23vw;
		background-color: #DFDFDF;
		height: 5vh;
		color: #6F6F6F;
		padding: 2vh;
		margin-right: 5px;
	}
	.active{
		display: inline-block;
		/*float: left;*/
		width: 23vw;
		height: 5vh;
		padding: 2vh;
		margin-right: 5px;
		color:white;
		background-color: #61A8DE;
	}
</style>