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. XPath 轴

    XML 实例文档 我们将在下面的例子中使用此 XML 文档: <?xml version="1.0" encoding="ISO-8859-1"?> ...

  2. DOM 节点

    <html> <head> <title>DOM 教程</title> </head> <body> <h1>DOM ...

  3. Java高级篇（二）——网络通信

    网络编程是每个开发人员工具相中的核心部分,我们在学习了诸多Java的知识后,也将步入几个大的方向,Java网络编程就是其中之一. 如今强调网络的程序不比涉及网络的更多.除了经典的应用程序,如电子邮件. ...

  4. linux samba服务配置

    1.下载 wget+rpm或yum install 2.配置/etc/samba/smb.conf cat smb.conf | grep setsebool 执行终端打印出来的字符串 setsebo ...

  5. 八：Vue下的国际化处理

    p { margin-bottom: 0.25cm; line-height: 120% } 1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-de ...

  6. 走在spring的路上。。。。

    一些spring的概念理解: 1.为什么需要spring? spring与我们平时用的工厂模式最大的差别在于,工厂模式设计还需要单独去建一个工厂类并去维护它, 而spring可只通过配置文件便可创建并 ...

  7. [LeetCode] Daily Temperatures 日常温度

    Given a list of daily temperatures, produce a list that, for each day in the input, tells you how ma ...

  8. 解决：GitHub 远程端添加了 README.md 文件后，本地 push 代码时出现错误

    一.错误描述 To github.com:compassblog/PythonExercise.git ! [rejected] master -> master (fetch first) e ...

  9. Windows 2012服务器安装GPU版TensorFlow完全攻略

    一.首先,推荐用Anaconda安装 因为Anaconda本身就已经默认安装了很多常用的Python库,可以省去大量的库安装过程,并且解决兼容性问题. Anaconda本身的安装也非常简单,搜索Ana ...

  10. [ZJOI2007]棋盘制作

    题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个8*8大小的黑白相间的方阵,对应八八六十四卦,黑白对应阴阳. 而我们的 ...