渲染内容为:

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. POJ-3169 Layout---差分约束系统+Bellman

    题目链接: https://vjudge.net/problem/POJ-3169 题目大意: 一些母牛按序号排成一条直线.有两种要求,A和B距离不得超过X,还有一种是C和D距离不得少于Y,问可能的最 ...

  2. 列表(list)之一定义 添加 删除 排序 反转 索引等其他操作

    1.定义: 创建一个列表,只要把逗号分隔的不同的数据项使用方括号括起来即可,序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. # 列表list1=[&q ...

  3. myeclipse自动添加注释

    开发需要,新建类的时候,需要加自己的名字,每次都要自己写,嫌麻烦,修改一下myeclipse配置文件即可 打开window---preferences 选中 new Java files 点击edit ...

  4. （hdu-4280）Island Transport~测试网络流模板速度~要加挂才能过啊

    Problem Description In the vast waters far far away, there are many islands. People are living on th ...

  5. angularjs中的几种工具方法

    1.比较两个字符串是否相等 2.对象形式转化成json和json转化成字符串形式 3.便利对象遍历数组 4.绑定数据 5.多个app功能模块的实现 <!doctype html><h ...

  6. 初学Servlet之实现Servlet接口

    package app01a;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.Servlet;im ...

  7. 获取Avrix上Computer Vision and Pattern Recognition的论文，进一步进行统计分析。

    此文主要记录我在18年寒假期间,收集Avrix论文的总结 寒假生活题外   在寒假期间,爸妈每天让我每天跟着他们6点起床,一起吃早点收拾,每天7点也就都收拾差不多.   早晨的时光是人最清醒的时刻,而 ...

  8. [NOIp 2016]愤怒的小鸟

    Description Input Output Sample Input 22 01.00 3.003.00 3.005 21.00 5.002.00 8.003.00 9.004.00 8.005 ...

  9. [HNOI2015]落忆枫音

    题目描述 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出这样一个问题. 「相信吧.不然我们是什么,一团肉吗?要不是有灵魂......我们也不可能再 ...

  10. bzoj2823[AHOI2012]信号塔

    2823: [AHOI2012]信号塔 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1190  Solved: 545[Submit][Status ...