使用component标签动态渲染element plus的图标原理

使用component标签动态渲染element plus的图标原理

关于怎么使用element plus 的图标方法这里不多说，看官网或者其他文章都可以这里主要讲使用
component标签渲染图标的原理。
Element Plus 图标官网：https://element-plus.org/zh-CN/component/icon.html
关于使用Element Plus 图标方法：https://blog.csdn.net/interest_ing_/article/details/137062740

<component :is="iconName" class=""></component>

我们可以了解到component标签的主要作用是用于动态渲染组件，可以根据 is 属性传入的值来渲染对应的组件。
举个例子，现在有创建好componentA和componentB两个子组件，要在父组件中根据不同条件渲染不同组件：

<template>  
  <div>  
    <component :is="setComponent"></component>  
  </div>  
</template>  
  
<script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  
  
export default {  
  components: {  
    ComponentA,  
    ComponentB  
  },  
  data() {  
    return {  
      //这里可以设定组件使用条件，我直接上名字了，这时父组件中就是渲染 ComponentA这个组件
      setComponent: 'ComponentA' 
    };  
  },  
  // ... 其他选项  
}  
</script>

而在使用Element Plus 图标时也可以直接使用图标名作为组件名。

因此我们只需要在component标签中的is属性设置对应的图标名字就相当于使用对应图标的组件

<component is="Edit" class="icons"></component>
//等价于
<Edit class="icons"/>

至于样式就自己设置了