乐趣区

关于vue-cli3:vuecli3elementplus-从菜单渲染浅谈动态渲染Vue组件的问题

作者：

jiezi

在

1. 对于Element-plus的菜单渲染问题

跨过了Element-UI，终于来到了Element-plus。又回到了一个老问题，menu的渲染。
创立一个menu数组，利用v-for来渲染数组，生成menu，十分惯例的操作。然而操作的过程中，呈现了一个小问题，就是对于icon的渲染。
咱们晓得，在Element-plus中，渲染一个带图标的菜单项，是这么搞的：

<el-menu-item index="/mypath">
    <template #title>
        <el-icon><Odometer /></el-icon>
        <span>title</span>
    </template>
</el-menu-item>

icon图标是间接以一个组件的模式进行渲染的。
那么，当咱们希图利用v-for进行列表渲染的时候，这个图标的组件怎么渲染进去，成了个难题。
间接用双花括号{{}}必定是不行的，间接会把标签搞成文本。
用v-html也不行，它只能渲染原生的HTML标签。
WTF？

2. 如何能力动静的把自定义组件渲染进去？

在<template></template>外面搞模版语法是行不通了。
那就只能尝试走其余的路线了。在搜索引擎欢快的与海量信息格斗之后，找到了切入点：render函数。
诚实说，其实早就该想到这个了，毕竟组件渲染就这么两条路嘛。奈何对render的应用频率太低了，选择性的搞遗记了。
那么来尝试吧。
写一个组件，通过props接管到图标的标签写法，而后渲染进去。

//留神在vue3中，render函数中不再有参数了，h函数须要按需加载。
import { h } from 'vue';

export default{
    props: {
        //Odometer
        html: String
    },
    render(){
        return h('el-icon', null, h(this.html));
    }
}

果不其然没有达到成果。罕用vue做开发的小伙伴必定一眼就发现了一个问题：
用h函数生成虚构DOM节点时，如果要生成的是组件，则第一个参数间接应用导入的组件即可。如果应用字符串，会一成不变的把字符串当做HTML标签渲染，而不是当作组件渲染。(参考链接)

批改一下：

import { h } from 'vue';
import { ElIcon } from 'element-plus';

export default{
    props: {
        //Odometer
        html: String
    },
    components: {
        ElIcon
    },
    render(){
        return h(ElIcon, null, h(this.html));
    }
}

还是不对呀，图标名称是传过来的字符串，没法间接获取到导入的组件呀。
吓得我连忙又翻了一下文档，在最初一行找到了这么一句话：

如果一个组件是用名字注册的，不能间接导入 (例如，由一个库全局注册)，能够应用 resolveComponent() 来解决这个问题。

原来如此。。。
好了，给出最终答案：

<el-menu-item :index="item.path">
    <template #title>
        <DynamicIcon :html="item.icon"></DynamicIcon>
        <span>{{item.title}}</span>
    </template>
</el-menu-item>
//DynamicIcon
import { h, resolveComponent } from 'vue';
import { Odometer, ChatDotRound } from '@element-plus/icons-vue';

export default{
    props: {
        //Odometer
        html: String
    },
    components: {
        Odometer,
        ChatDotRound
    },
    render(){
        //ElIcon间接全局全局导入了
        const IconBox = resolveComponent('ElIcon');
        const Icon = resolveComponent(this.html);

        return h(IconBox, null, h(Icon));
    }
}

3. 总结

最初总结一下子吧。
想要动静渲染组件，就须要利用props与render函数。
在应用h函数的时候，生成组件的虚构vnode，要间接应用导入的组件。
如果只能获取一个组件名称，那么就用resolveComponent函数手动解析注册的组件。

更多文章