Vue中的render函数随笔

使用vue-cli创建项目后，再main.js里面有这样一段代码：

new Vue({

    render:h => h(App)

}).$mount('#app')

render函数是渲染一个视图，然后给el挂载，如果没有render那页面什么也不会显示

最原始的：

render:function(createElement){
  return createElement(App)
}

缩写： （这里的h就是createElement的缩写）

render (createElement) {
  return createElement(App)
}

再缩写：

render (h) {
  return h()App)
}

使用ES6箭头函数

render: h => h(APP)

 

例子：

return h(this.tag, {
  class,
  style
 }, this.$slots.default  
)

第一个this.tag表示标签名，比如div

第二个参数是定义创建的组件的一些属性，比如class、style

第三个参数 this.$slots.default  父组件调用子组件时，传递的slot都保持在$slots.default这个数组里面