关于vue-cli3:vuecli3elementplus-从菜单渲染浅谈动态渲染Vue组件的问题
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>//DynamicIconimport { 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函数手动解析注册的组件。 ...