Vue 测试版本:Vue.js v2.5.13

先看个插槽的例子:

  1. <div id="app">
  2. <child >
  3. <span slot-scope="props">
  4. {{props.text}}
  5. </span>
  6. </child>
  7. </div>
  1. window.onload = function() {
  2. Vue.component('child', {
  3. template: `
  4. <div>
  5. <slot text="hello from child"></slot>
  6. </div>
  7. `,
  8. });
  9.  
  10. new Vue({
  11. el: '#app'
  12. });
  13. };

最终效果:

应该比较好理解,如果换成渲染函数,js 就是这样:

  1. window.onload = function() {
  2. Vue.component('child', {
  3. render(createElement){
  4. let vnodes1 = this.$scopedSlots.default({
  5. text: 'hello from child'
  6. });
  7. return createElement('div',[vnodes1]);
  8. }
  9. });
  10.  
  11. new Vue({
  12. el: '#app'
  13. });
  14. };

前后比较对照下,结合文档,应该能看懂;

但是插槽有很多种形式,具名与否,作用域与否等等,综合在一起,做了个 demo,代码如下:

  1. <div id="app">
  2. <myele>
  3. <div>
  4. default slot
  5. </div>
  6. <div slot="header">
  7. header
  8. </div>
  9. <div slot-scope="props" slot="footer">
  10. <div>footer from parent!</div>
  11. <div>{{props.text}}</div>
  12. </div>
  13. </myele>
  14. <child>
  15. <span slot-scope="props">
  16. {{props.text}}
  17. </span>
  18. </child>
  19. </div>

如果依旧用 template ,js 就是这样:

  1. window.onload = function() {
  2. Vue.component('myele', {
  3. template: `
  4. <div>
  5. <div>vnodes0</div>
  6. <slot></slot>
  7. <slot name="header"></slot>
  8. <slot name="footer" text="footer child value"></slot>
  9. <child>
  10. <span slot-scope="props">{{props.text}}</span>
  11. </child>
  12. </div>
  13. `
  14. });
  15.  
  16. Vue.component('child', {
  17. render(createElement) {
  18. let vnodes1 = this.$scopedSlots.default({
  19. text: 'hello from child'
  20. });
  21. return createElement('div', [vnodes1]);
  22. }
  23. });
  24.  
  25. new Vue({
  26. el: '#app'
  27. });
  28. };

效果图:

如果用渲染函数实现,就是这样:

  1. window.onload = function() {
  2. Vue.component('myele', {
  3. render(createElement) {
  4. let vnodes0 = createElement('div', 'vnodes0'),
  5. vnodes1 = this.$slots.default,
  6. vnodes2 = this.$slots.header,
  7. vnodes3 = this.$scopedSlots.footer({
  8. text: 'footer child value'
  9. }),
  10. vnodes4 = createElement('child', {
  11. scopedSlots: {
  12. default: function(props) {
  13. return createElement('span', props.text);
  14. }
  15. }
  16. });
  17. return createElement('div', [vnodes0, vnodes1, vnodes2, vnodes3, vnodes4]);
  18. }
  19. });
  20.  
  21. Vue.component('child', {
  22. render(createElement) {
  23. let vnodes1 = this.$scopedSlots.default({
  24. text: 'hello from child'
  25. });
  26. return createElement('div', [vnodes1]);
  27. }
  28. });
  29.  
  30. new Vue({
  31. el: '#app'
  32. });
  33. };

两边一对照,结合文档,应该就比较清楚了

参考文档:

https://cn.vuejs.org/v2/guide/render-function.html#插槽

https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容

Vue基础-渲染函数-插槽的更多相关文章

  1. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  2. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  3. Vue.js 渲染函数, JSX(未掌握,未学完)

    渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...

  4. Vue基础篇之 插槽 slot

  5. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  6. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  7. 从虚拟dom了解vue渲染函数

    vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...

  8. vue从入门到进阶:渲染函数 & JSX(八)

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  9. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

随机推荐

  1. php实现aes加密类

    php实现的aes加密类,代码中有使用方法. <?php //php aes加密类 class AESMcrypt { public $iv = null; public $key = null ...

  2. 异步FIFO的FPGA实现

    本文大部分内容来自Clifford E. Cummings的<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...

  3. C strlen vs sizeof

    strlen是函数. sizeof是操作符..以下一个简单的程序说明这件事: #include <iostream> #include <string.h> using nam ...

  4. GPIO输出—使用固件库点亮LED

    为了使工程更加有条理,我们把 LED 灯控制相关的代码独立分开存储,方便以后移植.在“工程模板”之上新建“ bsp_led.c”及“ bsp_led.h”文件,其中的“ bsp”即 BoardSupp ...

  5. Mac下修改应用程序的菜单快捷键!

    点击左上角苹果按钮,系统偏好设置 > 键盘 > 快捷键 > 应用快捷键 点击右下角添加按钮,选择chrome程序,输入菜单中文名以及快捷键 1.如何用F5刷新 鼠标悬停在左上角的刷新 ...

  6. gin入门

    Download and install it: $ go get github.com/gin-gonic/gin Import it in your code: import "gith ...

  7. Service层事务不能回滚的解决方式

    1.在service方法里面如果对异常进行了捕获的话,该事务是不会进行回滚的        默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚.          spr ...

  8. media wiki run on nginx

    1. 环境安装: nginx安装 nginx-1.5.7 php安装 PHP 5.4.10 (cli) (built: Jul 30 2014 16:45:08) mysql安装 Ver 14.14 ...

  9. 事务基础知识-->Spring事务管理

    Spring虽然提供了灵活方便的事务管理功能,但这些功能都是基于底层数据库本身的事务处理机制工作的.要深入了解Spring的事务管理和配置,有必要先对数据库事务的基础知识进行学习. 何为数据库事务 “ ...

  10. Unity中对SQL数据库的操作

    在Unity中,我们有时候需要连接数据库来达到数据的读取与储存.而在.NET平台下,ADO.NET为我们提供了公开数据访问服务的类.客户端应用程序可以使用ADO.NET来连接到数据源,并查询,添加,删 ...