vue components 动态组件详解

Vue 的动态组件允许你在一个组件中使用多个组件，并根据传入的属性动态地切换这些组件。这可以通过使用 component 标签和 is 属性来实现。

使用 component 标签

要使用动态组件，你需要使用 component 标签而不是普通的 div 或其他元素。在 component 标签中，你可以使用 is 属性来指定要使用的组件。

<template>  
  <div>  
    <component :is="currentComponent"></component>  
  </div>  
</template>  
  
<script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  
  
export default {  
  data() {  
    return {  
      currentComponent: 'ComponentA', // 当前组件的名称  
    };  
  },  
  components: {  
    ComponentA,  
    ComponentB,  
  },  
};  
</script>

在上面的示例中，我们使用了 component 标签，并使用 :is 属性绑定了 currentComponent 数据属性。currentComponent 的值可以是组件的名称（字符串），也可以是组件的引用（对象）。当 currentComponent 的值发生变化时，显示的组件也会相应地切换。

传递属性和方法

你可以通过动态组件将属性和方法传递给子组件。这可以通过在父组件中定义属性或方法，并在子组件中访问它们来实现。例如：

父组件：

<template>  
  <div>  
    <component :is="currentComponent" :prop="parentProp"></component>  
  </div>  
</template>  
  
<script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  
  
export default {  
  data() {  
    return {  
      currentComponent: 'ComponentA',  
      parentProp: 'Hello from parent',  
    };  
  },  
  components: {  
    ComponentA,  
    ComponentB,  
  },  
};  
</script>

子组件（ComponentA.vue）：

<template>  
  <div>  
    {{ prop }} from ComponentA.vue  
  </div>  
</template>

子组件（ComponentB.vue）：
在这个例子中，我们通过 :prop 属性将 parentProp 数据传递给子组件。子组件可以通过 prop 属性访问这个值。注意，子组件需要使用 props 选项来声明接收的属性。例如：
子组件（ComponentB.vue）：在 ComponentB.vue 文件中，你需要使用 props 选项来声明你想要接收的属性。这样，你就可以在模板中访问这些属性了。例如：