Demo
Vue的动态组件<component>是一个强大的模块，通过动态组件可以让页面组件随意切换，不需要通过路由定位，它在使用过程和普通自定义的组件基本一致，如下像下方给动态组件传递props值
<template>
<keep-alive>
<component :is="currentComponent" :parentProp="parentProp"></component>
</keep-alive>
</template>
<script>
export default {
props: {
parentProp: {
type: String,
required: true
}
},
data() {
return {
currentComponent: 'YourDynamicComponent',
};
}
};
</script>
在以上的currentComponent组件中，也有一个parentProp的props变量，这样就可以逐层传递变量啦，用于比如权限等级不同，显示的表格的列数不同等（不同权限等级对应不同的parentProp值）
以下是Vue动态组件的具体说明：
Vue中的动态组件是一种特殊的方式，可以用来动态地加载不同的组件而不需要多个<template>标签或者复杂的逻辑判断。这种方式主要是利用了Vue的<component>标签和is特性。
<component>标签：这是一个特殊的Vue标签，用来动态地挂载不同的组件。这个标签本身不代表任何具体的组件，而是作为一个占位符存在。is特性：这个特性用来指定<component>标签应该渲染哪个组件。is的值通常是一个字符串，表示要加载的组件名称，或者是一个返回组件选项的计算属性。
动态组件的使用场景包括但不限于：
- 根据不同的条件渲染不同的组件。
- 在运行时根据用户的输入或其他动态数据切换组件。
- 在像标签页这样的UI结构中切换显示不同的内容。
示例代码：
<template>
<component :is="currentComponent"></component>
</template>
<script>
export default {
data() {
return {
currentComponent: 'MyComponent'
}
}
// 其他选项和逻辑
}
</script>
在这个例子中，currentComponent是一个数据属性，可以根据应用程序的状态动态更改。这会导致<component>标签加载并渲染currentComponent指定的组件。通过改变currentComponent的值，可以切换渲染的组件，而不需要改变模板结构。
以下是官方文档相关
关于Vue动态组件的具体说明，可以参考Vue官方文档中的“动态组件 & 异步组件”部分。在Vue 2.x的文档中有关于动态组件的详细描述，包括如何使用<component>标签结合is属性来动态切换组件，以及如何使用<keep-alive>来保持组件状态。此外，还介绍了异步组件的使用方法，例如如何通过工厂函数异步解析组件定义，以及如何处理加载状态和错误。
Vue官网的相关页面可以通过以下链接访问：
这些页面提供了详细的代码示例和解释，可以帮助更深入地理解Vue中动态组件和异步组件的使用方式。
