渲染内容为:

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. 分析ajax请求抓取今日头条关键字美图

    # 目标:抓取今日头条关键字美图 # 思路: # 一.分析目标站点 # 二.构造ajax请求,用requests请求到索引页的内容,正则+BeautifulSoup得到索引url # 三.对索引url ...

  2. PHP+MySQL分页显示示例分析

    Web开发是今后分布式程式开发的主流,通常的web开发都要涉及到与数据库打交道,客户端从服务器端读取通常都是以分页的形式来显示,一页一页的阅读起来既方便又美观.所以说写分页程序是web开发的一个重要组 ...

  3. jacascript 事件流

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 事件流 当浏览器发展到第四代时(IE4及Netscape4),浏览器开发团队遇到了一个很有意思的问题:页面 ...

  4. python打包工具distutils、setuptools分析

    在上一篇博文中总结了python中导入包,安装包一条完整的线路.其中有一个有意思的知识点,安装包的方式有很多种,模块和包管理中打包,发布,安装也是值得研究的内容. python中安装包的方式有很多种: ...

  5. xcode8的那些坑儿

    前几天手又贱,更新了xcode8....被几个坑玩坏了.最起码,字体改了,我现在还没有适应.下面列举了这两天遇到的问题 1.关于相册,照相,通讯录,麦克风的权限问题 xcode8打完包安装后,你会发现 ...

  6. windows版本的phantomjs-2.1.1-windows安装

    windows版本的phantomjs-2.1.1-windows安装 1.下载 链接:http://pan.baidu.com/s/1dEUl6dN 密码:oij8 2.安装 下载好之后解压放到某个 ...

  7. [ZJOI2007]报表统计

    题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. 经过仔细观察,小Q发现统计一张报表实际上是维护一个非负整数数列,并 ...

  8. ●BZOJ 3545 [ONTAK2010]Peaks(离线)

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3545 http://www.lydsy.com/JudgeOnline/problem.ph ...

  9. ●BZOJ 4821 [Sdoi2017]相关分析

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4821 题解: 线段树是真的恶心,(也许是我的方法麻烦了一些吧)首先那个式子可以做如下化简: ...

  10. Linux添加系统调用的两种方法

    前言 系统调用的基本原理 系统调用其实就是函数调用,只不过调用的是内核态的函数,但是我们知道,用户态是不能随意调用内核态的函数的,所以采用软中断的方式从用户态陷入到内核态.在内核中通过软中断0X80, ...