【定义动态组件】

利用动态组件可以动态切换页面中现实的组件，使用标签可以定义动态组件，语法格式如下。

<component is ="要渲染的组件"></component>

在上述语法中，标签必须配合is属性一起使用，is属性属性值表示要渲染组件，当该属性值发生变化时，页面中渲染组件也会发生变化，is属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef（）函数定义响应式数据，shallowRef（）函数只处理对象外层属性响应，它比ref（）函数更适合于将组件的使用方法：
1.打开命令式提示符，切换到D：\vue\chapter04\04目录，在该目录下执行如下命令，创建项目。

yarn create vite component _foundation--template vue

2.项目创建完成后，执行如下命令进入项目目录，启动项目。

cd component_foundation
yarn
yarn dev

3.使用VS Code 编辑器打开D：\vue\chapter04\components-foundation目录
4.将src\style.css文件中样式代码全部删除
5.创建src\components\MyLeft.vue文件

<template>MyLeft组件</template>

6.创建src\components\MyRight.vue文件

<template>MyRight组件</template>

7.创建src\components\DynamicComponents.vue文件,在该文件中导入并使用MyLeft和MyRighqt组件，实现单击按钮时动态切换组件效果

<template>
	<button @click="showComponent = MyLeft">展示Myleft 组件</button>
	<button @click="showComponent = MyRight">展示MyRight 组件</button>
	<div>
		<component :is="showComponent"></component>
	</div>
</template>
<script set up>
import MyLeft from'./MyLeft.vue'
import MyRight from './MyRight.vue'
import {shallowRef} from 'vue'
const showCompoonent = shallowRef(MyLeft)
</script>