美文网首页
Vue中使用render方法渲染组件

Vue中使用render方法渲染组件

作者: Jure_joe | 来源:发表于2020-06-01 17:09 被阅读0次
  • 使用render方法的使用

  • 使用render方法,与使用components注册组件的方式达到的页面效果一致,唯一的区别会将原来的el代表的那个组件替换为自己新创建的组件,只能放一个组件

  • render:function(createElements) {return createElements(com)}中的传的createElements是一个方法,调用它,能够把指定的组件模板渲染为html结构

    image.png
  • 测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
        </div>
        <template id="temp">
            <div>
                这是一个组件
            </div>
        </template>
        <script type="text/javascript">
            const com = {
                template:"#temp"
            }
            const vm = new Vue({
                el:'#app',
                render:function(createElements) {
                    return createElements(com)
                } 
            })
        </script>
    </body>
</html>

相关文章

  • vue学习(15):vue结合webpack

    1.使用vue实例的render方法渲染组件 var login = { temp...

  • Vue - day6

    day6 使用vue实例 render方法渲染组件 区分webpack中导入vue和普通网页使用script导入v...

  • render函数

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

  • Vue中的render渲染函数

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

  • Vue中使用render方法渲染组件

    使用render方法的使用 使用render方法,与使用components注册组件的方式达到的页面效果一致,唯一...

  • 玩转Vue_render函数

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

  • 2019-07-03render函数

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

  • 《Vue3.0抢先学》系列之:使用render函数

    还记得Vue2.x中组件的 render 方法么?我们除了可以用template来进行模板化的渲染输出,还可以用 ...

  • vue页面的渲染过程

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

  • 2021-09-10 iview tabel添加个icon图标

    iview Table组件渲染操作按钮, render 渲染icon图标更改方法问题描述: Table组件操作,i...

网友评论

      本文标题:Vue中使用render方法渲染组件

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