Vue render方法以及与组件渲染的区别

1.render渲染页面

VUE中使用 render 属性可以配置一些覆盖当前VUE组件的html

//js
var log = {
    
    
  template: '<h1>登录</h1>'
}

var vm = new Vue({
    
    
  el:'#app',
  data:{
    
    },
  render: function (creatElements){
    
    
    return creatElements(log) 
  }
 })
 
//html
<div id="app">
  <p>注册</p>
</div>

上面代码配置了render属性,return参数的过程中也带了我们定义的 log 组件,函数执行后,组件就会被渲染到页面中去。
页面效果如下
在这里插入图片描述

2.与components的区别

上面的实例中,使用render 渲染页面,会整个覆盖当前实例的html节点,而使用components只是会在原页面中加上我们定义的节点。

猜你喜欢

转载自blog.csdn.net/pspxuan/article/details/104698006