目录h方法介绍
createElement简介
createElement、this.$slots、scopedSlots用法
完整代码下载
一、h方法介绍
如果你接触过 vue 一段时间了,那么你可能会遇到过rendering方法在你的 app 文件中 -- 在最新版本的CLI中它是一个默认值, 并且是在main.js文件中:
new Vue({
render: h => h(App)
}).$mount('#app')
或者是,如果你使用了 render 方法 (函数),可能会使用 JSX:
Vue.component('jsx-example', {
render (h) {
return
}
})
或许你想知道,h 是用来干嘛的?它表示什么意思呢? h 代表的是 hyperscript 。它是 HTML 的一部分,表示的是 超文本标记语言:当我们正在处理一个脚本的时候,在虚拟 DOM 节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中。详情点击这里 Cycle.js。
在这个问题上,Evan 描述到:Hyperscript 它本身表示的是 "生成 HTML 结构的脚本"
缩写为 h 是因为它更容易去输入。 他还在 Frontend Masters 上描述了这一点 他的高级 Vue 研讨会 。
真的,你可以认为它是 createElement 的缩写。 这将是一个长长的形式:
//使用createElementrender: function (createElement) {
return createElement(App);
}
//用 h 代替它render: function (h) {
return h(App);
}
//ES6简写render: h => h (App)
名称 hyperscript 可能会让某些人感到困惑,因为 hyperscript 实际上是 一个库的名字(这些日子没有更新 ),它实际上有一个 小的生态系统。 在这种情况下,我们不是在谈论那个特定的实现。
希望能为那些感到困惑的人解决问题!
二、createElement简介
h(createElement)函数有3个参数