vue3实战中关于 component 内置组件的应用问题

Question

使用 options API 图标可以正常显示

<template>
  <div>menu</div>
  <el-icon><Setting /></el-icon>
  <el-icon><component :is="str" /></el-icon>
</template>

<script >
import {Setting} from '@element-plus/icons-vue'
export default {
  data() {
    return {
      str: 'Setting'
    }
  },
  components: {
    Setting
  }
}
</script>

使用 composition API 图标不能正常显示

<template>
  <div>menu</div>
  <el-icon><Setting /></el-icon>
  <el-icon><component :is="str" /></el-icon>
</template>

<script setup>
import {Setting} from '@element-plus/icons-vue'
const str = 'Setting'
console.log(Setting) // {name: 'Setting, render: function(){}}
</script>

请问为什么组合API无法显示图标组件？该如何解决？

Answer 1

不太理解，你为什么不这么写https://v3.cn.vuejs.org/api/s...

import {Setting} from '@element-plus/icons-vue'
const str = Setting

component的is属性是支持组件作为值的：https://v3.cn.vuejs.org/guide...

如果一定要使用字符串的话，可以考虑全局注册或者局部注册
https://v3.cn.vuejs.org/guide...