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. POJ-2421 Constructing Roads---确定部分边的MST

    题目链接: https://vjudge.net/problem/POJ-2421 题目大意: 还是给你n个点,然后求最小生成树.特殊之处在于有一些点之间已经连上了边. 思路: 和POJ-1751一样 ...

  2. JSON.stringify()和JSON.parse()分别是什么

    JSON.stringify() 从一个对象中解析出字符串 JSON.stringify({"a":"1","b":"2" ...

  3. 从零开始系列之vue全家桶（1）安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router

    写在前面: 什么是全家桶? 包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https ...

  4. java---interrupt、interrupted和isInterrupted的区别

    1.interrupt()  interrupt方法用于中断线程.调用该方法的线程的状态为将被置为"中断"状态. 注意:线程中断仅仅是置线程的中断状态位,不会停止线程.需要用户自己 ...

  5. Hive优化案例

    1.Hadoop计算框架的特点 数据量大不是问题,数据倾斜是个问题. jobs数比较多的作业效率相对比较低,比如即使有几百万的表,如果多次关联多次汇总,产生十几个jobs,耗时很长.原因是map re ...

  6. [LeetCode] Binary Tree Tilt 二叉树的坡度

    Given a binary tree, return the tilt of the whole tree. The tilt of a tree node is defined as the ab ...

  7. bzoj2535 [Noi2010]航空管制

    Description 世博期间,上海的航空客运量大大超过了平时,随之而来的航空管制也频频发生.最近,小X就因为航空管制,连续两次在机场被延误超过了两小时.对此,小X表示很不满意. 在这次来烟台的路上 ...

  8. [FJOI2014]最短路径树问题

    Description 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择总长度最短的路径走.若有多条长度最短的路径,则选择经过的顶点序列字典序最 ...

  9. hdu 5868 Polya计数

    Different Circle Permutation Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K ...

  10. Blocks

    Description solution 这题和之前做过的一题的一个套路非常类似:把不是更优的决策给去掉,使得序列变得具有单调性,分析这题: 发现如果两个右端点 \(i\),\(j\) 满足 \(su ...