一例完全理解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"> ...
随机推荐
- linux添加超级用户
创建super账号 useradd testuser 创建用户testuser passwd testuser 给已创建的用户testuser设置密码 如果需要让此用户有root权限,执行命令: ro ...
- 单例模式详解及java常用类
[单例模式] 确保某一个类,只能产生一个实例. 设计思路: ====将构造函数私有化,确保类外部,不能使用new关键字自行创建对象. ====在类内部实例化一个对象,并通过静态方法返回. ( ...
- angularjs中的几种工具方法
1.比较两个字符串是否相等 2.对象形式转化成json和json转化成字符串形式 3.便利对象遍历数组 4.绑定数据 5.多个app功能模块的实现 <!doctype html><h ...
- [LeetCode] Falling Squares 下落的方块
On an infinite number line (x-axis), we drop given squares in the order they are given. The i-th squ ...
- 初学servlet之form表单
使用doget向页面写表单,使用dopost读取表单内容,包括了单选按钮,复选框,下拉列表等等的读取方法,form的action属性不写,默认表单会被提交给请求他时用的相同的URL package a ...
- PHPCMS v9.6.0 任意文件上传漏洞分析
引用源:http://paper.seebug.org/273/ 配置了php debug的环境,并且根据这篇文章把流程走了一遍,对phpstorm的debug熟练度+1(跟pycharm一样) 用户 ...
- spring data jpa 组合条件查询封装
/** * 定义一个查询条件容器 * @author lee * * @param <T> */ public class Criteria<T> implements Spe ...
- codeforces 888G Xor-MST
You are given a complete undirected graph with n vertices. A number ai is assigned to each vertex, a ...
- [SDOI2009]HH的项链
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...
- bzoj 2339: [HNOI2011]卡农
Description Solution 比较难想.... 我们先考虑去掉无序的这个条件,改为有序,最后除 \(m!\) 即可 设 \(f[i]\) 表示前\(i\)个合法集合的方案数 明确一点: 如 ...