1、render函数、createElement函数

Vue.component('es-header', {
render: function (createElement) {
return createElement({
'div',
'我是header'
})
},
props: {}
})
// 等同于
Vue.component('es-header', {
template: '<div>我是dom元素</div>',
props: {}
})

  createElement 函数的作用就是生成一个 VNode节点(虚拟dom),

  render 函数得到createElement() 创建的 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

  就是这么简单 别想多了。

2、vm.$slots

  vm.$slots是一个对象,键名是所有具名slot的名称,加上一个default,而键值则是一个存放VNode节点的数组。

  官方文档:用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性(例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到),default 属性则包括了所有没有被包含在具名 slot 中的节点。

  实例:

<blog-post>
<h1 slot="header">我属于header</h1>
<h1 slot="header">我也属于header</h1>
<p>我谁都不属于</p>
<p slot="footer">我属于footer</p>
<p>谁来认领我</p>
</blog-post>

  我们看下这个blog-post的示例:在blog-post标签里,元素被我们这样设置:属于header的slot有2个h1;属于footer的slot的有1个<p>,属于不具名slot(会归到default里)的有2个<p>及4个空的VNode节点

  如果像下面这样,指定了render函数的话,就可以手动创建出html标签。

Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})

  createElement(html标签名,VNode节点数组) 会编译出一个指定的html标签,然后把VNode节点数组里非空的节点编译回原来的html内容。其结果就相当于把原来的那些<blog-post>标签之间的内容根据它们的slot属性,放进了指定的标签里。

render函数、createElement函数与vm.$slots的更多相关文章

  1. Vuejs2.0学习(Render函数,createElement,vm.$slots)

    直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...

  2. 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

  3. Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...

  4. createElement 函数

    我们知道,vue函数的渲染其实是由render函数的回调函数createElement 来创建的虚拟dom,那么它到底是怎么创建组件的? 尚未理解透彻[捂脸],有待补充,参考如下: https://w ...

  5. render()--组件--纯函数

    render() 当 被调用时,它会检查 和 的变化并返回以下类型之一: React 元素.通常通过 JSX 创建.例如,<div /> 会被 React 渲染为 DOM 节点,<M ...

  6. vue3渲染函数(h函数)的变化

    vue3 渲染函数(h函数)的更改 h函数的更改总结 1==>h 现在全局导入,而不是作为参数传递给渲染函数 2==>渲染函数参数更改为在有状态组件和函数组件之间更加一致 3==>v ...

  7. javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数

    javascript函数一共可分为五类:    ·常规函数    ·数组函数    ·日期函数    ·数学函数    ·字符串函数    1.常规函数    javascript常规函数包括以下9个 ...

  8. 分时函数 & 节流函数

    分时函数 & 节流函数 1.函数节流 JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合 理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下 ...

  9. React-高阶函数_函数柯里化

    高阶函数_函数柯里化 高阶函数(定义) 如果一个函数符合下面两个规范,就是高阶函数: 如果A函数,接收的参数是一个函数,那么A就是一个高阶函数(比如数组方法arr.map()接收的就是一个处理item ...

随机推荐

  1. 警告:MySQL-server-5.6.26-1.el7.x86_64.rpm: 头V3 DSA/SHA1 Signature, 密钥 ID 5072e1f5: NOKEY

    警告:MySQL-server--.el7.x86_64.rpm: 头V3 DSA/SHA1 Signature, 密钥 ID 5072e1f5: NOKEY 错误:依赖检测失败: /usr/bin/ ...

  2. C#使用CSS选择器抓取页面内容

    最近在查wpf绘图资料时,偶然看到Python使用CSS选择器抓取网页的功能.觉得很强,这里用C#也实现一下. 先介绍一下CSS选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. ...

  3. 小程序加入echart 图表

    github上的地址 https://github.com/ecomfe/echarts-for-weixin 复制到当前项目根目录下 添加展示bar图表例子的文件夹 index.json 中配置使用 ...

  4. Python进阶(七)----带参数的装饰器,多个装饰器修饰同一个函数和递归简单案例(斐波那契数列)

    Python进阶(七)----带参数的装饰器,多个装饰器修饰同一个函数和递归简单案例(斐波那契数列) 一丶带参数的装饰器 def wrapper_out(pt): def wrapper(func): ...

  5. Linux:检查当前运行级别的五种方法

    运行级就是Linux操作系统当前正在运行的功能级别.存在七个运行级别,编号从0到6.系统可以引导到任何给定的运行级别.运行级别由数字标识. 每个运行级别指定不同的系统配置,并允许访问不同的进程组合.默 ...

  6. Java项目部分总结

    一.数据库sql操作: 1.三表查询的时候,最后的条件由于当前字段必须判断是属于哪个表,所以需要注明根据哪个表中的字段进行判断: 并且再在后面加上limit的时候,需要注意先进行添加,避免系统不能识别 ...

  7. 笔谈HTTP Multipart POST请求上传文件

    公司一做iOS开发的同事用HTTP Multipart POST请求上传语音数据,但是做了两天都没搞定,项目经理找到我去帮忙弄下.以前做项目只用过get.post,对于现在这个跟服务器交互的表单请求我 ...

  8. 前端动态效果小结(jQuery)

    1.easyUI(jQuery) http://www.jeasyui.net/demo/954.html

  9. MySQL/MariaDB数据库的函数

      MySQL/MariaDB数据库的函数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. MySQL/MariaDB数据库的函数分为系统函数和用户自定义函数(user-define ...

  10. Gerrit代码评审流程

    Gerrit代码评审流程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.代码评审流程(如下图所示) 第一步:贡献者报建一个提交,并通过之前从gerrit下载的commit-ms ...