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

• Z时代
• 2024-02-08
• 分类：IT

使用 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无法显示图标组件？该如何解决？

回答：

不太理解，你为什么不这么写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...

以上是 vue3实战中关于 component 内置组件的应用问题 的全部内容， 来源链接： utcz.com/p/937222.html