vue Render:h=>h(App) 解析
在学习Element-ui组件时,对组件的引入需要在main.js中写入如下代码:import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'Vue.use(ElementUI)new V
·
在学习Element-ui组件时,对组件的引入需要在main.js中写入如下代码:
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
其中对
render:h=>h(App) 这句代码不是很理解,所以对此查找了有关资料,以下为结果。
这种写法
{
render:h=>h(App)
}
等价于
{
render:h=>{
return h(App);
}
}
等价于
{
render:function(h){
return h(App);
}
}
也就是
{
render:function(creatElement){
return creatElemnt(App);
}
}
render:h=>h(App) 这是:
1、ES6的写法,表示Vue实例选项对象的render方法作为一个函数,接受传入的参数h函数,返回h(App)的函数调用结果
2、Vue在创建Vue实例时,通过调用render方法来渲染实例的DOM树
3、Vue在调用render方法时,会传入一个createElement函数作为参数,也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用,关于createElement函数说明参见:
https://cn.vuejs.org/v2/guide/render-function.html#createElement-参数
官网介绍的很清楚,这样应该可以理解了。更多推荐
已为社区贡献2条内容
所有评论(0)