Vue中的render函数随笔

时间：2019-03-13 11:48:09 阅读：171 评论：0 收藏：0 [点我收藏+]

使用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这个数组里面

原文：https://www.cnblogs.com/zhaobao1830/p/10521613.html

踩

(0)

评论一句话评论（0）

分享档案

更多>