一例完全理解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"> ...
随机推荐
- Java-NIO（八）：DatagramChannel
Java NIO中的DatagramChannel是一个能收发UDP包的通道.操作步骤: 1)打开 DatagramChannel 2)接收/发送数据 同样它也支持NIO的非阻塞模式操作,例如: @T ...
- php怎么返回json格式的数据
- [LeetCode] Closest Leaf in a Binary Tree 二叉树中最近的叶结点
Given a binary tree where every node has a unique value, and a target key k, find the value of the n ...
- MySQL慢日志功能分析及优化增强
本文由 网易云发布. MySQL慢日志(slow log)是MySQL DBA及其他开发.运维人员需经常关注的一类信息.使用慢日志可找出执行时间较长或未走索引等SQL语句,为进行系统调优提供依据.本 ...
- mongo 服务化与删除
MONGO 服务化 使用超级用户进入cmd到D:\mongodb\bin> 日志文件需要提前创建 mongod --bind_ip 0.0.0.0 --logpath D:\mongodb\d ...
- vue插件移动框
npm i dragablemodel -S(安装插件) import dragablemodel from 'dragablemodel' Vue.use(loading) 模板(组件) <d ...
- [SDOI 2011]黑白棋
Description 题库链接 给出一个 \(1\times n\) 的棋盘,棋盘上有 \(k\) 个棋子,一半是黑色,一半是白色.最左边是白色棋子,最右边是黑色棋子,相邻的棋子颜色不同. 小 \( ...
- TopCoder SRM 558 Div 1 - Problem 1000 SurroundingGame
传送门:https://284914869.github.io/AEoj/558.html 题目简述 一个人在一个n * m棋盘上玩游戏,想要占领一个格子有两个方法: 在这个格子放一个棋子. 这个 ...
- [Codeforces]852A - Digits
题目大意:给一个10^200000以内的数字,支持一种操作:在数字之间加若干个加号,把原数字变为加法运算后的结果,要求在三次操作内把数字变成个位数,输出方案. 做法:直观的想法是每两位之间都塞加号,事 ...
- hdu 5880 AC自动机
Family View Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...