【Vue】动态Icon组件(变量值作为组件名)

在Vue项目中，我们经常会使用到图标。Element Plus，作为Vue的组件库，提供了ElIcon组件来方便我们使用图标。同时，Vue的<component>元素允许我们使用动态组件，这使得我们可以在不同的条件下渲染不同的组件。

ElIcon组件

Element Plus内置了丰富的图标，你可以直接使用ElIcon组件来渲染它们。例如，如果你想要渲染一个笑脸图标，你可以这样做：

html 复制代码

<el-icon>
  <smile />
</el-icon>

其中，<smile />就是Element Plus内置的一个图标组件。

动态组件

在 Vue 中，可以使用动态组件的概念来根据变量的值渲染不同的组件。动态组件允许你使用同一个挂载点，并在多个组件之间切换。你可以通过一个变量来动态地决定要渲染哪个组件。

下面是一个简单的例子，展示了如何使用变量值作为组件名：

首先，定义你的组件：

html 复制代码

<!-- ChildComponent1.vue -->
<template>
  <div>Component 1</div>
</template>
<!-- ChildComponent2.vue -->
<template>
  <div>Component 2</div>
</template>

在父组件中，你可以这样做：

html 复制代码

<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentComponent: 'ChildComponent1' // 初始组件名
    }
  },
  components: {
    ChildComponent1,
    ChildComponent2
  }
}
</script>

在这个例子中，currentComponent 是一个响应式数据属性，它的值决定了哪个组件会被渲染。在父组件的 components 选项中注册了所有可能用到的子组件。

你可以通过更改 currentComponent 的值来切换不同的组件：

js 复制代码

this.currentComponent = 'ChildComponent2';

Vue 会自动地切换到新的组件。这种方法非常适合用于条件渲染，例如根据用户输入或者应用状态动态渲染不同的视图。

结合使用

将ElIcon和动态组件结合起来，我们就可以方便地在Vue3项目中使用Element Plus的图标了。例如，我们可以定义一个icons数组，包含我们需要的所有图标组件名，然后在模板中这样使用：

html 复制代码

<template v-for="item in items" :key="item.id">
  <el-icon>
    <component :is="icons[item.type]" />
  </el-icon>
</template>

在这个例子中，items是一个数组，每个元素都有一个type属性，这个属性对应icons数组中的一个图标组件名。<component>元素会根据icons[item.type]的值动态地渲染对应的图标组件。

通过这种方式，我们就可以方便地在Vue3项目中使用Element Plus的图标，同时也可以根据需要动态地渲染不同的图标。