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. python如何转换word格式、读取word内容、转成html

    # python如何转换word格式.读取word内容.转成html? import docx from win32com import client as wc # 首先将doc转换成docx wo ...

  2. springboot测试、打包、部署

    本文使用<springboot集成mybatis(一)>项目,依次介绍springboot测试.打包.部署. 大多数朋友是做后端的,也就是为其他系统或者前端UI提供Rest API服务. ...

  3. vue-cli 体验

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  4. mysql索引类型和索引方法

    索引类型 mysql索引类型normal,unique,full text的区别是什么? normal:表示普通索引 unique:表示唯一的,不允许重复的索引,如果该字段信息保证不会重复例如身份证号 ...

  5. 修改 iOS AppIcon

    有一次看到亚马逊的客户端打开后,就提示 icon 改变了,回桌面一看,竟然真的变了.然后就上网搜索是怎么实现的,参照着写了一个小 demo ,权当笔记. 首先,导入图片到项目的中,如下图.不要导入到 ...

  6. drupal 8 建立我的相册

    一.先建一个存图片的内容类型 1.创建内容类型 点击[结构]>[内容类型]>[+add content type] 点击[保存和管理字段] 2.添加字段 点击[+添加字段] 点击[保存并继 ...

  7. [LeetCode] Next Greater Element III 下一个较大的元素之三

    Given a positive 32-bit integer n, you need to find the smallest 32-bit integer which has exactly th ...

  8. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  9. 个人建站&mac下安装hexo

    title: 个人建站&mac下安装hexo date: 2018-04-18 16:34:02 tags: [mac,blog,个人建站,markdown] --- 这两天使用了markdo ...

  10. HDU 1729

    给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置 她在行走过程中,不能转太多弯了,否则她会晕倒的. (每次在一个方向上一直走到底,并push ...