13.vue3组件化开发

1.动态组件

案例:
点击不同的按钮切换不同的组件.
方式一:通过v-if判断切换组件
方式二:通过动态组件的方式切换
动态组件是使用component组件(内置组件attribute(属性)is来实现)
is的值需要是通过component函数注册的组件或是在组件对象components对象中注册的组件.

<template>
	<div>
		<button v-for="item in tabs" :key="item"
				@click="clickitem(item)"
				:class="{active :itemsteat===item}">
			{
  {item}}
		</button>
		<!-- 2.通过动态组件切换 -->
		<component :is="itemsteat"></component>
		<!-- 1.通过判断v-if选择组件 -->
		<!-- <div>
			<template v-if="itemsteat=='home'">
				<home></home>
			</template>
			<template v-else-if="itemsteat=='other'">
				<other></other>
			</template>
			<template v-else="itemsteat=='my'">
				<my></my>
			</template>
		</div> -->
	</div>
</template>

<script>
	// 引入组件
	import Home from "./pages/Home.vue";
	import Other from "./pages/Other.vue";
	import My from "./pages/My.vue";
	
	export default{
		// 注册组件
		components:{
			Home,
			Other,
			My
		},
		data() {
			return {
				tabs:["home","other",&