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>