Vue 组件基础——动态组件

一、动态组件语法

利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件，语法格式如下。

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

上述语法格式中，<component>标签必须配合is属性一起使用，is属性的属性值表示要渲染的组件，当该属性值发生变化时，页面中渲染的组件也会发生变化。

is属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef()函数定义响应式数据，将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应，它比ref()函数更适合于将组件保存为响应式数据。

二、演示动态组件的使用方法

创建SignIn.vue登录组件：

<template>
    <div>
        登录组件
    </div>
</template>

创建SignUp.vue注册组件：

<template>
    <div>
        注册组件
    </div>
</template>

创建DynamicComponent.vue组件：

<template>
    <button @click="showComponentName = SignIn">展示登录组件</button>
    <button @click="showComponentName = SignUp">展示注册组件</button>
    <div>
        <KeepAlive> 
            <component :is="showComponentName" />
        </KeepAlive>
    </div>
</template>

<script setup>
import { shallowRef } from 'vue'
import SignUp from './SignUp.vue'
import SignIn from './SignIn.vue'

const showComponentName = shallowRef('SignUp')
</script>

其中<KeepAlive></KeepAlive>用于实现组件缓存。

 附本节项目代码下载地址：

链接：https://pan.baidu.com/s/16Iy3bNzoQUNiS8D0qOYtOw?pwd=8888 
提取码：8888