一例完全理解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"> ...
随机推荐
- POJ-3259 Wormholes---SPFA判断有无负环
题目链接: https://vjudge.net/problem/POJ-3259 题目大意: 农夫约翰在探索他的许多农场,发现了一些惊人的虫洞.虫洞是很奇特的,因为它是一个单向通道,可让你进入虫洞的 ...
- vue2.0 带头冲锋（打包时，小心萝卜坑）
距离上一期,时间间距可能有点长.谁让本人处于兴奋状态,生活已经不能自理. 哈哈哈,嗯,正经一下, 在已有的经验里总结一下那些容易抓狂的坑! 起因:npm run build 打包 本地运行,你以为可以 ...
- ng-select 下拉的两种方式
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- [LeetCode] Largest Palindrome Product 最大回文串乘积
Find the largest palindrome made from the product of two n-digit numbers. Since the result could be ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
- 运维技巧-Nginx日志格式
1.说一说 当你安装完nginx,输出的格式是比较乱的,这样我们就需要自己去定义一下,自己看着舒服的格式. 2.Nginx日志字段 $remote_addr 记录客户端IP,但她的值不是客户端提供的, ...
- [POI 2007]ZAP-Queries
Description Byteasar the Cryptographer works on breaking the code of BSA (Byteotian Security Agency) ...
- bzoj3309DZY Loves Math
3309: DZY Loves Math Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 1240 Solved: 777[Submit][Statu ...
- Codeforces 666E Forensic Examination
题意:给定主串s和m个模式串,每次询问[l,r]的模式串中出现s[pl...pr]次数最多的串和次数. 这题挺简单的,先把所有模式串拿来建广义后缀自动机,询问相当于子树众数,用线段树合并即可. 那我为 ...
- SqlServer 跨网段跨服务器复制
注意:被同步的表必须有主键,否则无法同步.对数据库进行操作时需要登录服务器,在服务器本地进行操作,远程对数据库进行操作不能完成所有的步骤 准备工作: 1.将发布数据库完整备份到订阅服务器上,并在订阅服 ...