利用动态组件可以动态切换页面中现实的组件,使用标签可以定义动态组件,语法格式如下。
<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>