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

34次阅读

共计 1791 个字符，预计需要花费 5 分钟才能阅读完成。

跨过了 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？

在 <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));
    }
}

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

正文完