想必用 vue 撸过后台的同学们都有经历过,侧边导航栏结合 vue-router 的无限层级渲染。
但是 vue3 所推崇的按需引入加上 element-plus 的 icon 组件变化。
使得我们在渲染的时候需要用到动态组件。

内置组件 component

在 jsx 中没有办法正常渲染,有成功的同学可以留下代码讨论下。

resolveComponent 与 h 结合使用

成功渲染,代码如下:

import { defineComponent, resolveComponent, h } from "vue";
import { HomeFilled, Lock } from "@element-plus/icons-vue";

export default defineComponent({
  name: "OverrideItem",
  components: {
    HomeFilled,
    Lock,
  },
  render(){
  	...
  	<el-icon size={14}>
     {this.route.meta?.icon &&
       h(resolveComponent(this.route.meta.icon))}
   	</el-icon>
    ...      
  }
})

简单总结下:

  1. jsx 中需要使用 resolveComponent 函数去访问组件,组件的name就是入参。
  2. 访问成功之后,再使用 h 渲染函数将其渲染出来。
  3. 需要注意,要渲染的组件必须在 components 中声明,否则一样无效。
Logo

前往低代码交流专区

更多推荐