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 ...
随机推荐
- WPF 的 VisualBrush 只刷新显示的视觉效果,不刷新布局范围
原文:WPF 的 VisualBrush 只刷新显示的视觉效果,不刷新布局范围 WPF 的 VisualBrush 可以帮助我们在一个控件中显示另一个控件的外观.这是非常妙的功能. 但是本文需要说其中 ...
- Java中Date、String、Calendar类型之间的转化
1.Calendar 转化 String //获取当前时间的具体情况,如年,月,日,week,date,分,秒等 Calendar calendat = Calendar.getInstanc ...
- 不安全的验证码Insecure CAPTCHA
没啥好讲的,当验证不合格时,通过burp抓包工具修改成符合要求的数据包.修改参数标志位.USER-AGENT之类的参数. 防御 加强验证,Anti-CSRF token机制防御CSRF攻击,利用PDO ...
- 图解HTTP(三)
第七章 确保Web安全的HTTPS 1.HTTP的不足 通信使用明文(不加密),内容可能被监听 不验证通信方的身份,因此可能遭遇伪装 无法验证报文的完整性,所以有可能已遭篡改 2.通信加密 通信的加密 ...
- 钻石diamaund外语
Whenever I fail as a father or husband... a toy and a diamond always works. I never worry about diet ...
- 网络编程之 tcp服务器(一)
1.创建套接字 2.bind绑定ip和port 作为服务方,ip port 应该是固定的,所以要绑定;客户端一般不绑定 3.listen使套接字变成监听套接字,即变为被动链接 4.accept等待客户 ...
- 图说jdk1.8新特性(5)--- 编译器新特性
/** * Returns the name of the parameter. If the parameter's name is * {@linkplain #isNamePresent() p ...
- java开发手册-总结与补充
1.分层领域模型规约 1.DO( Data Object):与数据库表结构一一对应,通过 DAO 层向上传输数据源对象. 2.DTO( Data Transfer Object):数据传输对象, Se ...
- [LeetCode] 198. 打家劫舍II ☆☆☆(动态规划)
描述 你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金.这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的.同时,相邻的房屋装有相互连通的防盗系统,如果两间相邻的 ...
- PHP微信商户支付企业付款到零钱功能
一 开通条件,就是首先要在微信平台设置好. 以下微信文档里有的,我这里大概掠几项比较重要的. 付款资金 企业付款到零钱资金使用商户号余额资金. 根据商户号的账户开通情况,实际出款账户有做区别: ◆ 默 ...