4.10 vue动态组件 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
	<style>
		button {
			width: 100px;
			height: 50px;
			margin: 0 10px;
			outline: none;
		}

		.content {
			width: 340px;
			height: 300px;
			margin-left: 10px;
			border: 1px solid #000;
			font-size: 40px;
			box-sizing: border-box;
			padding: 20px;
		}

		.active {
			background: green;
			color: #fff;
			border: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<button v-for="tab in tabs" :key="tab.id" @click="currentTab=tab.component"
			:class="{active: currentTab==tab.component}">{{tab.name}}</button>
		<div class="content">
			<keep-alive>
				<component :is="currentTab"></component>
			</keep-alive>

		</div>
	</div>

	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					currentTab: 'Html',
					tabs: [
						{ name: 'html', component: 'Html', id: 0 },
						{ name: 'css', component: 'Css', id: 1 },
						{ name: 'js', component: 'Javascript', id: 2 },
					]
				}
			},
			components: {
				Html: {
					template: '<div>html</div>'
				},
				Css: {
					template: '<div>css</div>'
				},
				Javascript: {
					template: '<div>js</div>',
					data() {
						return {
							currentTab: 'Vue',
							children: [
								{ name: 'vue', component: 'Vue', id: 3 },
								{ name: 'react', component: 'React', id: 4 },
							]
						}
					},
					components: {
						Vue: {
							template: '<div>vue</div>'
						},
						React: {
							template: '<div>react</div>'
						},
					},
					template: `
						<div>
							<button v-for="child in children" :key="child.id" @click="currentTab=child.component"
								:class="{active: currentTab==child.component}">{{child.name}}</button>
							<div class="childContent">
								<keep-alive>
									<component :is="currentTab"></component>
								</keep-alive>
							</div>
						</div>`
				},
			}
		});
	</script>
</body>

</html>

　　

posted @ 2022-01-03 15:09  JavaShop  阅读(40)  评论(0)    收藏  举报