Vue中使用render方法渲染组件

  • 使用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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。