普通组件定义渲染和render渲染组件的区别

普通方式定义组件和效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>111111111</p>
            <login></login>
        </div>
        
        
        <script>
            
//            var login = {
//                template:"<h1>这是登录组件</h1>"
//            }
            
            var vm = new Vue({
                el:"#app",
                data:{},
                methods:{},
//                render:function(createEle){
//                    //把制定的组件模板渲染成html结构
//                    //此参数为形参，名字自定义，这个形参是一个方法，返回的是一个html
//                    return createEle(login);
//                },
                components:{
                    login:{
                        template:"<h1>这是登录组件</h1>"
                    }
                }
            });
            
        </script>
        
    </body>
</html>

效果：

render渲染组件方式和效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>111111111</p>
            <!--<login></login>-->
        </div>
        
        
        <script>
            
            var login = {
                template:"<h1>这是登录组件</h1>"
            }
            
            var vm = new Vue({
                el:"#app",
                data:{},
                methods:{},
                render:function(createEle){
                    //把制定的组件模板渲染成html结构
                    //此参数为形参，名字自定义，这个形参是一个方法，返回的是一个html
                    return createEle(login);
                }
//                components:{
//                    login:{
//                        template:"<h1>这是登录组件</h1>"
//                    }
//                }
            });
            
        </script>
        
    </body>
</html>

效果：

普通组件定义渲染和render渲染组件的区别

普通方式定义组件和效果：

render渲染组件方式和效果：

猜你喜欢