Vue动态组件＜component＞传递变量

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特性。

1. <component>标签：这是一个特殊的Vue标签，用来动态地挂载不同的组件。这个标签本身不代表任何具体的组件，而是作为一个占位符存在。

2. 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 2.x动态组件和异步组件：Vue 2.x文档
• Vue 3.x异步组件：Vue 3.x文档

这些页面提供了详细的代码示例和解释，可以帮助更深入地理解Vue中动态组件和异步组件的使用方式。