渲染内容为:

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. [js]关于call()和apply()的理解

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. 因为 JavaScript 的函数存在「定义时上下文」和 ...

  2. ACE之通信的设计空间

    本篇文章主要介绍 .无连接的和面向连接的协议之间的对比 .同步的和异步的消息交换之间的对比. .消息传递和共享内存之间的对比. 1:无连接和面向连接的协议对比 协议(protocol)是指一组规则,这 ...

  3. C# 枚举器

    1:枚举器和可枚举类型 我们知道使用foreach可以遍历数组中的元素.那么为什么数组可以被foreach语句处理呢,下面我们就进行讨论一下这个问题. 2:使用foreach语句 我们知道当我们使用f ...

  4. 超级好用的前端开发测试Chrome插件-基于REST的Web服务客户端

    基于REST的Web服务客户端是一款功能强大的谷歌浏览器插件,使用基于REST的Web服务客户端(模拟REST客户端)可以让用户使用谷歌浏览器模拟REST请求来测试REST风格. 基于REST的Web ...

  5. Java网络编程基础(Netty预备知识)

    今天在家休息,闲来无事,写篇博客,陶冶下情操~~~ =================我是分割线================ 最近在重新学习Java网络编程基础,以便后续进行Netty的学习. 整 ...

  6. JavaScript 和 TypeScript 中的 class

    对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大 ...

  7. PHPCMS v9.6.0 任意用户密码重置

    参考来源:http://wooyun.jozxing.cc/static/bugs/wooyun-2016-0173130.html 他分析的好像不对.我用我的在分析一次. 先来看poc: /inde ...

  8. bzoj 4830: [Hnoi2017]抛硬币

    Description 小A和小B是一对好朋友,他们经常一起愉快的玩耍.最近小B沉迷于**师手游,天天刷本,根本无心搞学习.但是 已经入坑了几个月,却一次都没有抽到SSR,让他非常怀疑人生.勤勉的小A ...

  9. [TJOI2017]异或和

    题目描述 在加里敦中学的小明最近爱上了数学竞赛,很多数学竞赛的题都是与序列的连续和相关的.所以对于一个序列,求出它们所有的连续和来说,小明觉得十分的 简单.但今天小明遇到了一个序列和的难题,这个题目不 ...

  10. NOIP2014-7-7模拟赛

    1.无线通讯网(wireless.pas/cpp/c) [题目描述] 国防部计划用无线网络连接若干个边防哨所.2种不同的通讯技术用来搭建无线网络:每个边防哨所都要配备无线电收发器:有一些哨所还可以增配 ...