美文网首页
使用render函数渲染组件

使用render函数渲染组件

作者: 小丘啦啦啦 | 来源:发表于2019-05-13 09:21 被阅读0次

一、说明
Vue实例中除了components属性注册组件,还可以使用render属性。
指向一个函数,第一个固定形参 createElements ,是一个方法,调用它可以把指定组件模板渲染为html结构。
render属性return返回的结果,会替换页面上此Vue实例el指定的那容器(所有都清空然后替换)。
二、实例

<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'>
        <h1>111</h1>
    </div>
    <script>
        var login = {
            template: '<h1>登陆组件</h1>'
        }
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            render: function (createElements) { //createElements形参是一个方法,调用它能把指定组件模板渲染为html结构
                return createElements(login); //return的结果会替换页面中el指定的容器
            }
        });
    </script>
</body>

</html>

相关文章

  • 玩转Vue_render函数

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

  • 2019-07-03render函数

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

  • render函数

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

  • vue 渲染函数 & JSX

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

  • 使用render函数渲染组件

    一、说明Vue实例中除了components属性注册组件,还可以使用render属性。指向一个函数,第一个固定形参...

  • Vue中的render渲染函数

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

  • React 钩子函数

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

  • 06【手写vue-router】实现router-view

    原理:根据路由取到要展示的组件,然后用render函数进行渲染。

  • [搬运] React 函数式组件与类组件的区别

    1 - 函数式组件不会被实例化。整体渲染性能的搭配提升 函数式组件被精简成一个 render 方法的函数,所以...

  • Render渲染函数和JSX

    render函数 h( 元素,属性,值 ) 中 h 不能少 使用 list组件中调用 函数式组件 定义函数式组件 ...

网友评论

      本文标题:使用render函数渲染组件

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