渲染内容为:

hello from functional render scopedSlots

render scopedSlots

named slot of render

hello from functional render scopedSlots

functional render scopedSlots

named slot of functional render

源码:

<!DOCTYPE html>

<html lang='zh'>

<head>

  <title></title>

</head>

<body>

  <div id="app">

  <rrr>

    <p slot="static"> named slot of render</p>

    <template slot="scp" scope="props">

      <p>hello from functional render scopedSlots</p>

      <p>{{ props.text }}</p>

    </template>

  </rrr>

<hr>

  <fff>

    <p slot="static"> named slot of functional render</p>

    <template slot="scp" scope="props">

      <p>hello from functional render scopedSlots</p>

      <p>{{ props.text }}</p>

    </template>

  </fff>

  </div>

<script src="https://cdn.staticfile.org/vue/2.3.2/vue.js"></script>

<script>

Vue.component('rrr', {

  render: function (h) {

    var children = this.$scopedSlots.scp({text:"render scopedSlots"})

    children = children.concat(this.$slots.static)

    return h('div',children)

  },

})

Vue.component('fff', {

  functional: true,

  render: function (h, ctx) {

    var children = ctx.data.scopedSlots.scp({text:"functional render scopedSlots"})

    children = children.concat(ctx.slots().static)

    return h('div',children)

  },

})

var app = new Vue({

}).$mount('#app')

</script>

</body>

</html>

vue 2.0 scopedSlots和slots在render函数中的应用示例的更多相关文章

  1. vue入门：（底层渲染实现render函数、实例生命周期）

    vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...

  2. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  3. 【转】【Html】Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）

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

  4. Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）

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

  5. 大白话Vue源码系列(03)：生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  6. 大白话Vue源码系列(04)：生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  7. element-ui（vue版）使用switch时change回调函数中的形参传值问题

    需求说明 有多个switch组件 需要知道switch的状态 表格中当前行(scope.row)的数据 问题描述 官方文档中对switch中change的描述: 目前能得到switch的状态值,但是无 ...

  8. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  9. Vue.2.0.5-Render 函数

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

随机推荐

  1. Struts(二十一)：类型转换与复杂属性、集合属性配合使用

    背景: 本章节主要以复杂属性.集合属性类型转化为例,来学习这两种情况下怎么使用. 复杂对象属性转换场景: 1.新建struts_04 web.xml <?xml version="1. ...

  2. [Kaggle] dogs-vs-cats之建立模型

    建立神经网络模型,下面要建立的模型如下: (上图来源:训练网络时,打开tensorboard即可观察网络结构,在下一节模型训练的时候会讲到) 下面为具体步骤: Step 0:导入相关库 import ...

  3. 1025InnoDB log file 设置多大合适

    转自 http://blog.csdn.net/langkeziju/article/details/51094289 数据库的东西,往往一个参数就牵涉N多知识点.所以简单的说一下.大家都知道inno ...

  4. Windows Socket的UDP和TCP编程介绍

    1:网络中进程之间如何通信 为了实现进程之间通信,首要解决的问题是如何唯一标识一个进程,在本地可以通过进程PID来唯一标识一个进程,但是在网络中则是行不通的,其实TCP/IP协议族已经帮我们解决了这个 ...

  5. TNS-12560: Message 12560 not found; No message file for product=network, facility=TNS报错

    [oracle@localhost bin]$ ./lsnrctl startLSNRCTL for Linux: Version 12.2.0.1.0 - Production on 17-APR- ...

  6. [HNOI2016]序列

    题目描述 给定长度为n的序列:a1,a2,...,an,记为a[1:n].类似地,a[l:r](1<=l<=r<=N)是指序 列:al,al+1,...,ar-1,ar.若1< ...

  7. reserve的使用

    reserve: 强迫容器将它的容量变成n 可以避免不必要的重新分配 如果n大于当前容量,那么正常. 如果n小于当前容量,vector会忽略,string则是减小为 max(size(),n). 如果 ...

  8. 17.10.28&29

    28上午 骚猪选讲 28下午 BOZJ 1081 [SCOI2005]超级格雷码 感觉就是一个找规律,然后模拟输出.半天没找到一个比较简便的模拟方法,这份代码是学习网上一位大佬的,很巧妙. 代码: # ...

  9. 【Codeforces Round #430 (Div. 2) A C D三个题】

    ·不论难度,A,C,D自己都有收获! [A. Kirill And The Game] ·全是英文题,述大意:    给出两组区间端点:l,r,x,y和一个k.(都是正整数,保证区间不为空),询问是否 ...

  10. bzoj 1835: [ZJOI2010]基站选址

    Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立基站的费用为Ci.如果在距离第i个村庄 ...