https://jsfiddle.net/pronan/mjqpmw0u/

通过调节plan="bbb"的值, 比如换成plan="children",你会发现ctx.slots()和ctx.children是怎样和ttt的子节点对应的.

<!DOCTYPE html>

<html lang='zh'>

<head>

  <title></title>

</head>

<body>

  <div id="app">

    <ttt plan="bbb">

      <aaa></aaa>

      <bbb slot="bbb" msg="slot-1"></bbb>

      <p>default-1</p>

      <bbb slot="bbb" msg="slot-2"></bbb>

      <ccc slot="ccc"></ccc>

      <p>default-2</p>

    </ttt>

  </div>

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

<script>

Vue.component('aaa', {

  functional: true,

  render: function (h, ctx) {

    return h('div',['aaa'])

  },

})

Vue.component('bbb', {

  functional: true,

  render: function (h, ctx) {

    return h('div',['bbb:'+ctx.props.msg])

  },

})

Vue.component('ccc', {

  functional: true,

  render: function (h, ctx) {

    return h('div',['ccc'])

  },

})

Vue.component('ttt', {

  functional: true,

  render: function (h, ctx) {

    console.log(ctx.children)

    console.log(ctx.slots())

    var plan = ctx.props.plan

    var slots = ctx.slots()

    var children

    if (plan == 'children') {

      children = ctx.children

    } else if (plan == 'bbb') {

      children = slots.bbb

    } else if (plan == 'ccc') {

      children = slots.ccc

    } else {

      children = slots.default

    }

    return h('div',children)

  },

})

var app = new Vue({

}).$mount('#app')

</script>

</body>

</html>

一例完全理解vue 2.0 的slots 和 functional render的更多相关文章

  1. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  2. [转]Vue 2.0——渐进式前端解决方案

    前言:框架是什么?为什么要有框架?在众多的框架之中,Vue 独具魅力之处在哪里呢?其背后的核心思想是什么?Vue 究竟火到什么程度?最近发布的 Vue2.0 又做了哪些改进呢?Vue 和 Weex 又 ...

  3. 新手入门指导：Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  4. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  5. 理解vue中的scope的使用

    理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...

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

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

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. Android开发之深入理解Android 7.0系统权限更改相关文档

    http://www.cnblogs.com/dazhao/p/6547811.html 摘要: Android 6.0之后的版本增加了运行时权限,应用程序在执行每个需要系统权限的功能时,需要添加权限 ...

  9. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Entry的验证

    Entry组件是支持验证输入的合法性的, 比如要求输入数字,你输入了字母就是非法. 实现该功能,需要通过设置validate,validatecommand,invalidcommand选项. 1.首 ...

  2. 我花了 8 小时，"掌握"了一下 Flutter | Flutter 中文站上线

    Hi,大家好,我是承香墨影! 距离 Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本,Flutter 是 Google 用以帮助开发者在 Android 和 iOS ...

  3. [LeetCode] Dota2 Senate 刀塔二参议院

    In the world of Dota2, there are two parties: the Radiant and the Dire. The Dota2 senate consists of ...

  4. spring data学习

    在Spring Data模块中定义依赖: <dependencies> <dependency> <groupId>org.springframework.data ...

  5. [HNOI 2011]数矩形

    Description 题库链接 给出平面上 \(n\) 个点,选出四个点作为矩形顶点.求出矩形最大面积. \(1\leq n\leq 1500\) Solution 转载自 Z-Y-Y-S dark ...

  6. [Codeforces 946G]Almost Increasing Array

    Description 题库链接 给你一个长度为 \(n\) 的序列 \(A\) .现在准许你删除任意一个数,删除之后需要修改最小的次数使序列单调递增.问最小次数. \(1\leq n\leq 200 ...

  7. [TJOI 2016&HEOI 2016]排序

    Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...

  8. ●BZOJ 2434: [Noi2011]阿狸的打字机

    ●赘述题目 (题意就不赘述了) ●解法: ●我先想的一个比较暴力的方法(要TLE): (ac自动机)先求出last数组(参见刘汝佳的解释:last[j]:表示j节点沿着失配指针往回走时,遇到的下一个单 ...

  9. codeforces round #419 B. Karen and Coffee

    To stay woke and attentive during classes, Karen needs some coffee! Karen, a coffee aficionado, want ...

  10. 【LSGDOJ1834 Tree】树链剖分

    题目描述 给定一个N个结点的无向树,树中的结点按照1...N编号,树中的边按照1...N − 1编号,每条边都赋予一个权值.你需要编写程序支持以下三种操作: 1.    CHANGE i v:将i号边 ...