render函数、createElement函数与vm.$slots
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的更多相关文章
- Vuejs2.0学习(Render函数,createElement,vm.$slots)
直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...
- 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- createElement 函数
我们知道,vue函数的渲染其实是由render函数的回调函数createElement 来创建的虚拟dom,那么它到底是怎么创建组件的? 尚未理解透彻[捂脸],有待补充,参考如下: https://w ...
- render()--组件--纯函数
render() 当 被调用时,它会检查 和 的变化并返回以下类型之一: React 元素.通常通过 JSX 创建.例如,<div /> 会被 React 渲染为 DOM 节点,<M ...
- vue3渲染函数(h函数)的变化
vue3 渲染函数(h函数)的更改 h函数的更改总结 1==>h 现在全局导入,而不是作为参数传递给渲染函数 2==>渲染函数参数更改为在有状态组件和函数组件之间更加一致 3==>v ...
- javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数
javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个 ...
- 分时函数 & 节流函数
分时函数 & 节流函数 1.函数节流 JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合 理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下 ...
- React-高阶函数_函数柯里化
高阶函数_函数柯里化 高阶函数(定义) 如果一个函数符合下面两个规范,就是高阶函数: 如果A函数,接收的参数是一个函数,那么A就是一个高阶函数(比如数组方法arr.map()接收的就是一个处理item ...
随机推荐
- 警告: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/ ...
- C#使用CSS选择器抓取页面内容
最近在查wpf绘图资料时,偶然看到Python使用CSS选择器抓取网页的功能.觉得很强,这里用C#也实现一下. 先介绍一下CSS选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. ...
- 小程序加入echart 图表
github上的地址 https://github.com/ecomfe/echarts-for-weixin 复制到当前项目根目录下 添加展示bar图表例子的文件夹 index.json 中配置使用 ...
- Python进阶(七)----带参数的装饰器,多个装饰器修饰同一个函数和递归简单案例(斐波那契数列)
Python进阶(七)----带参数的装饰器,多个装饰器修饰同一个函数和递归简单案例(斐波那契数列) 一丶带参数的装饰器 def wrapper_out(pt): def wrapper(func): ...
- Linux:检查当前运行级别的五种方法
运行级就是Linux操作系统当前正在运行的功能级别.存在七个运行级别,编号从0到6.系统可以引导到任何给定的运行级别.运行级别由数字标识. 每个运行级别指定不同的系统配置,并允许访问不同的进程组合.默 ...
- Java项目部分总结
一.数据库sql操作: 1.三表查询的时候,最后的条件由于当前字段必须判断是属于哪个表,所以需要注明根据哪个表中的字段进行判断: 并且再在后面加上limit的时候,需要注意先进行添加,避免系统不能识别 ...
- 笔谈HTTP Multipart POST请求上传文件
公司一做iOS开发的同事用HTTP Multipart POST请求上传语音数据,但是做了两天都没搞定,项目经理找到我去帮忙弄下.以前做项目只用过get.post,对于现在这个跟服务器交互的表单请求我 ...
- 前端动态效果小结(jQuery)
1.easyUI(jQuery) http://www.jeasyui.net/demo/954.html
- MySQL/MariaDB数据库的函数
MySQL/MariaDB数据库的函数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. MySQL/MariaDB数据库的函数分为系统函数和用户自定义函数(user-define ...
- Gerrit代码评审流程
Gerrit代码评审流程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.代码评审流程(如下图所示) 第一步:贡献者报建一个提交,并通过之前从gerrit下载的commit-ms ...