美文网首页
vue 3 通过render函数渲染element-plus组件

vue 3 通过render函数渲染element-plus组件

作者: 齐格Insight | 来源:发表于2024-08-19 15:03 被阅读0次

vue 3 通过render函数渲染element-plus组件有以下几种实现方式,举例如果想使用el-input组件

直接引入组件

<script lang="jsx">
import { ElInput } from 'element-plus'

export default {
    render() {
        return h(ElInput, {}, [])
    }
}
</script>

通过名字引入

有时候,我们不知道引入的是 ElInput,希望通过名字引入,可以用以下方法

<script lang="jsx">
import { h, resolveComponent } from 'vue'

export default {
    render() {
        const component = resolveComponent('el-input')   // 'el-input' 可通过外部传入
        return h(component, {}, [])
    }
}
</script>

全局注入

如果在main.js里全局注入了el-input,就可以按以下写法:
https://element-plus.org/zh-CN/guide/quickstart.html

<script lang="jsx">
import { h } from 'vue'

export default {
    render() {
        return h('el-input', {}, [])
    }
}
</script>

相关文章

  • Vue中的render渲染函数

    Vue中的render渲染函数 render函数只支持jsx写法创建虚拟Dom节点。vue组件中的template...

  • vue 渲染函数 & JSX

    渲染函数 render 通过渲染函数渲染组件 渲染后: JSX 通过以上方式创建虚拟DOM,语法比较繁琐。可以使用...

  • vue页面的渲染过程

    Vue的渲染过程 我们从最简单的new Vue开始: Vue在渲染的时候先调用原型上的_render函数将组件对象...

  • ###VUE下

    渲染函数和jsx 在vue中我们可以不用template来指定组件的模板,而是用render函数来创建虚拟dom结...

  • 玩转Vue_render函数

    新创建一个html,利用之前学过的组件注册完成渲染 使用render函数也可以渲染组件 区别 : 使用render...

  • 2019-07-03render函数

    新创建一个html,利用之前学过的组件注册完成渲染 使用render函数也可以渲染组件 区别 : 使用render...

  • render函数

    使用render函数可以渲染组件 区别 : 使用render渲染的组件会完全替换el挂载元素中的内容,而第一种方法...

  • 11.更灵活的组件:Render 函数与 Functional

    更灵活的组件:Render 函数与 Functional Render Vue.js 2.x 与 Vue.js 1...

  • 3.组件构造函数

    组件构造函数如何获取 Vue.extend() render 改装插件

  • React 钩子函数

    挂载时的钩子函数 constructor():实现组件实例初始化 render():纯函数,组件渲染 compon...

网友评论

      本文标题:vue 3 通过render函数渲染element-plus组件

      本文链接:https://www.haomeiwen.com/subject/sgvmkjtx.html