vue 2.0 scopedSlots和slots在render函数中的应用示例
渲染内容为:
hello from functional render scopedSlots
render scopedSlots
named slot of render
hello from functional render scopedSlots
functional render scopedSlots
named slot of functional render
源码:
<!DOCTYPE html>
<html lang='zh'>
<head>
<title></title>
</head>
<body>
<div id="app">
<rrr>
<p slot="static"> named slot of render</p>
<template slot="scp" scope="props">
<p>hello from functional render scopedSlots</p>
<p>{{ props.text }}</p>
</template>
</rrr>
<hr>
<fff>
<p slot="static"> named slot of functional render</p>
<template slot="scp" scope="props">
<p>hello from functional render scopedSlots</p>
<p>{{ props.text }}</p>
</template>
</fff>
</div>
<script src="https://cdn.staticfile.org/vue/2.3.2/vue.js"></script>
<script>
Vue.component('rrr', {
render: function (h) {
var children = this.$scopedSlots.scp({text:"render scopedSlots"})
children = children.concat(this.$slots.static)
return h('div',children)
},
})
Vue.component('fff', {
functional: true,
render: function (h, ctx) {
var children = ctx.data.scopedSlots.scp({text:"functional render scopedSlots"})
children = children.concat(ctx.slots().static)
return h('div',children)
},
})
var app = new Vue({
}).$mount('#app')
</script>
</body>
</html>
vue 2.0 scopedSlots和slots在render函数中的应用示例的更多相关文章
- vue入门：（底层渲染实现render函数、实例生命周期）
vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- 【转】【Html】Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 大白话Vue源码系列(04)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- element-ui（vue版）使用switch时change回调函数中的形参传值问题
需求说明 有多个switch组件 需要知道switch的状态 表格中当前行(scope.row)的数据 问题描述 官方文档中对switch中change的描述: 目前能得到switch的状态值,但是无 ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- Vue.2.0.5-Render 函数
基础 Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 templa ...
随机推荐
- UVA-562 Dividing coins---01背包+平分钱币
题目链接: https://vjudge.net/problem/UVA-562 题目大意: 给定n个硬币,要求将这些硬币平分以使两个人获得的钱尽量多,求两个人分到的钱最小差值 思路: 它所给出的n个 ...
- Java面试题—初级（4）
31.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,"xyz" ...
- python制作一个简单的中奖系统
注释: 展示图下的代码,我是用pycharm写的,是python解释器中的一种,本课没不同解释器的要求,可根据自己喜欢的解释器编写. 步骤: 本期给大家带来的是,一个简单的中奖系统,首先打开自己电脑上 ...
- linux下多线程互斥量实现生产者--消费者问题和哲学家就餐问题
生产者消费者问题,又有界缓冲区问题.两个进程共享一个一个公共的固定大小的缓冲区.其中一个是生产者,将信息放入缓冲区,另一个是消费者,从缓冲区中取信息. 问题的关键在于缓冲区已满,而此时生产者还想往其中 ...
- Jenkins: Can't connect to Docker daemon解决办法
Jenkins安装后首次使用报错: Jenkins: Can't connect to Docker daemon 解决办法: 参照StackOverflow 添加jenkins用户到dockergr ...
- Idea导入多个maven项目到同一目录下
目标 简单导入多个maven项目进入同一个project(相当于eclipse的workspace) 过程 1.新建一个目录作为仿eclipse的workspace,这里起名为idea-workspa ...
- [HNOI 2016]序列
Description 题库链接 给你一个长度为 \(n\) 的序列 \(A\) ,给出 \(q\) 组询问.每次询问 \([l,r]\) ,求该区间内所有的子序列中最小值的和. \(1\leq n, ...
- [Codeforces 933B]A Determined Cleanup
Description 题库链接 给你两个正整数 \(p,k\) ,询问是否能够构造多项式 \(f(x)=\sum\limits_{i=0}^{d-1}a_ix^i\) ,使得存在多项式 \(q(x) ...
- [NOIp 2011]Mayan游戏
Description Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏 ...
- ●洛谷P2606 [ZJOI2010]排列计数
题链: https://www.luogu.org/problemnew/show/P2606题解: 组合数(DP),Lucas定理 首先应该容易看出,这个排列其实是一个小顶堆. 然后我们可以考虑dp ...