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. 1.7 理解dropout

    Dropout为什么有正则化的作用? 下面来直观理解一下. 上面讲到,dropout每次迭代都会让一部分神经元失活,这样使得神经网络会比原始的神经网络规模变小,因此采用一个较小神经网络好像和使用正则化 ...

  2. Git的本地仓库与GitHub的远程仓库

    gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub.GitHub 是目前为止最大的开源 Git 托管服务,并且还是少数同时提供公共代码 ...

  3. Zookeeper增删改查

    1.下载Zookeeper http://mirrors.shu.edu.cn/apache/zookeeper/ 这里我选择Zookeeper 3.4.11版本 ZooKeeper 支持某些特定的四 ...

  4. 如何降低移动APP的开发成本

    在当下竞争激烈的商业世界中,移动APP开发是您业务的有利补充.移动APP可通过吸引新客户和保留现有客户,帮助公司成功开展业务.定制一个属于自己公司的移动APP扮演着重要角色,手机APP可以说通过轻松处 ...

  5. ueditor图片无法左右对齐的解决

    找到ueditor的配置文件ueditor.config.js,里面搜索 whiteList 然后在下面找到img,在里面添加 'style'. 添加后如下: img : [ 'src', 'alt' ...

  6. 二哥的xss游戏

    断断续续做完了,收获挺多的. 地址:http://xsst.sinaapp.com/xss/ 二哥的xss游戏 第一题http://xsst.sinaapp.com/xss/ext/1.php?umo ...

  7. OC/Swift/C/C++混合使用的编程姿势

    一,OC调用C语言方法 1.OC中的.m文件对C语言完全兼容,可以直接导入C头文件,进行使用 2.定义一个.c的C语言文件,在.m文件中导入,就可以使用.   二,OC调用C++语言方法 1.需要将. ...

  8. [SDOI 2011]消耗战

    Description 题库链接 给你一棵 \(n\) 个节点根节点为 \(1\) 的有根树,有边权. \(m\) 次询问,每次给出 \(k_i\) 个关键点.询问切断一些边,使这些点到根节点不连通, ...

  9. ●POJ 2125 Destroying The Graph

    题链: http://poj.org/problem?id=2125 题解: 最小割 + 输出割方案.建图:拆点,每个题拆为 i 和 i'分别表示其的入点和出点建立超源 S和超汇 T.S -> ...

  10. 关于HttpClient重试策略的研究

    一.背景 由于工作上的业务本人经常与第三方系统交互,所以经常会使用HttpClient与第三方进行通信.对于交易类的接口,订单状态是至关重要的. 这就牵扯到一系列问题: HttpClient是否有默认 ...