一例完全理解vue 2.0 的slots 和 functional render
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的更多相关文章
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- [转]Vue 2.0——渐进式前端解决方案
前言:框架是什么?为什么要有框架?在众多的框架之中,Vue 独具魅力之处在哪里呢?其背后的核心思想是什么?Vue 究竟火到什么程度?最近发布的 Vue2.0 又做了哪些改进呢?Vue 和 Weex 又 ...
- 新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- 理解vue中的scope的使用
理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- Android开发之深入理解Android 7.0系统权限更改相关文档
http://www.cnblogs.com/dazhao/p/6547811.html 摘要: Android 6.0之后的版本增加了运行时权限,应用程序在执行每个需要系统权限的功能时,需要添加权限 ...
- 深入理解 Vue 组件
深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...
- 我常用的css基础
mkdir 创建文件夹touch 创建文件mode:'history' ----------------------------------------------------------去除# di ...
- [LeetCode] Brick Wall 砖头墙壁
There is a brick wall in front of you. The wall is rectangular and has several rows of bricks. The b ...
- Mac 下安装 MySQL 经历
1.使用 homebrew 安装: brew install mysql 结果报错: $ brew install mysql ==> Downloading http://dev.mysql. ...
- [USACO 12DEC]Running Away From the Barn
Description It's milking time at Farmer John's farm, but the cows have all run away! Farmer John nee ...
- [Codeforces 863C]1-2-3
Description Ilya is working for the company that constructs robots. Ilya writes programs for enterta ...
- poj 3693 后缀数组 重复次数最多的连续重复子串
Maximum repetition substring Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8669 Acc ...
- 使用python+requests+unittest实现接口自动化测试
这两天一直在找直接用python做接口自动化的方法,在网上也搜了一些博客参考,今天自己动手试了一下. 一.整体结构 上图是项目的目录结构,下面主要介绍下每个目录的作用. Common:公共方法:主要放 ...
- wpf中静态资源和动态资源的区别
静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用,之后就不再访问这个资源了. 动态资源(DynamicResource)指的是在程序运行过程中然会去访问资源.
- day4 liaoxuefeng---高级特性
掌握了Python的数据类型.语句和函数,基本上就可以编写出很多有用的程序了. 但是在Python中,代码不是越多越好,而是越少越好.代码不是越复杂越好,而是越简单越好. 基于这一思想,我们来介绍Py ...