Vue基础-渲染函数-插槽
Vue 测试版本:Vue.js v2.5.13
先看个插槽的例子:
- <div id="app">
- <child >
- <span slot-scope="props">
- {{props.text}}
- </span>
- </child>
- </div>
- window.onload = function() {
- Vue.component('child', {
- template: `
- <div>
- <slot text="hello from child"></slot>
- </div>
- `,
- });
- new Vue({
- el: '#app'
- });
- };
最终效果:
应该比较好理解,如果换成渲染函数,js 就是这样:
- window.onload = function() {
- Vue.component('child', {
- render(createElement){
- let vnodes1 = this.$scopedSlots.default({
- text: 'hello from child'
- });
- return createElement('div',[vnodes1]);
- }
- });
- new Vue({
- el: '#app'
- });
- };
前后比较对照下,结合文档,应该能看懂;
但是插槽有很多种形式,具名与否,作用域与否等等,综合在一起,做了个 demo,代码如下:
- <div id="app">
- <myele>
- <div>
- default slot
- </div>
- <div slot="header">
- header
- </div>
- <div slot-scope="props" slot="footer">
- <div>footer from parent!</div>
- <div>{{props.text}}</div>
- </div>
- </myele>
- <child>
- <span slot-scope="props">
- {{props.text}}
- </span>
- </child>
- </div>
如果依旧用 template ,js 就是这样:
- window.onload = function() {
- Vue.component('myele', {
- template: `
- <div>
- <div>vnodes0</div>
- <slot></slot>
- <slot name="header"></slot>
- <slot name="footer" text="footer child value"></slot>
- <child>
- <span slot-scope="props">{{props.text}}</span>
- </child>
- </div>
- `
- });
- Vue.component('child', {
- render(createElement) {
- let vnodes1 = this.$scopedSlots.default({
- text: 'hello from child'
- });
- return createElement('div', [vnodes1]);
- }
- });
- new Vue({
- el: '#app'
- });
- };
效果图:
如果用渲染函数实现,就是这样:
- window.onload = function() {
- Vue.component('myele', {
- render(createElement) {
- let vnodes0 = createElement('div', 'vnodes0'),
- vnodes1 = this.$slots.default,
- vnodes2 = this.$slots.header,
- vnodes3 = this.$scopedSlots.footer({
- text: 'footer child value'
- }),
- vnodes4 = createElement('child', {
- scopedSlots: {
- default: function(props) {
- return createElement('span', props.text);
- }
- }
- });
- return createElement('div', [vnodes0, vnodes1, vnodes2, vnodes3, vnodes4]);
- }
- });
- Vue.component('child', {
- render(createElement) {
- let vnodes1 = this.$scopedSlots.default({
- text: 'hello from child'
- });
- return createElement('div', [vnodes1]);
- }
- });
- new Vue({
- el: '#app'
- });
- };
两边一对照,结合文档,应该就比较清楚了
参考文档:
https://cn.vuejs.org/v2/guide/render-function.html#插槽
https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容
Vue基础-渲染函数-插槽的更多相关文章
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- Vue.js 渲染函数, JSX(未掌握,未学完)
渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...
- Vue基础篇之 插槽 slot
- Render渲染函数和JSX
1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 从虚拟dom了解vue渲染函数
vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...
- vue从入门到进阶:渲染函数 & JSX(八)
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- Vue渲染函数
前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...
随机推荐
- php实现aes加密类
php实现的aes加密类,代码中有使用方法. <?php //php aes加密类 class AESMcrypt { public $iv = null; public $key = null ...
- 异步FIFO的FPGA实现
本文大部分内容来自Clifford E. Cummings的<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...
- C strlen vs sizeof
strlen是函数. sizeof是操作符..以下一个简单的程序说明这件事: #include <iostream> #include <string.h> using nam ...
- GPIO输出—使用固件库点亮LED
为了使工程更加有条理,我们把 LED 灯控制相关的代码独立分开存储,方便以后移植.在“工程模板”之上新建“ bsp_led.c”及“ bsp_led.h”文件,其中的“ bsp”即 BoardSupp ...
- Mac下修改应用程序的菜单快捷键!
点击左上角苹果按钮,系统偏好设置 > 键盘 > 快捷键 > 应用快捷键 点击右下角添加按钮,选择chrome程序,输入菜单中文名以及快捷键 1.如何用F5刷新 鼠标悬停在左上角的刷新 ...
- gin入门
Download and install it: $ go get github.com/gin-gonic/gin Import it in your code: import "gith ...
- Service层事务不能回滚的解决方式
1.在service方法里面如果对异常进行了捕获的话,该事务是不会进行回滚的 默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚. spr ...
- media wiki run on nginx
1. 环境安装: nginx安装 nginx-1.5.7 php安装 PHP 5.4.10 (cli) (built: Jul 30 2014 16:45:08) mysql安装 Ver 14.14 ...
- 事务基础知识-->Spring事务管理
Spring虽然提供了灵活方便的事务管理功能,但这些功能都是基于底层数据库本身的事务处理机制工作的.要深入了解Spring的事务管理和配置,有必要先对数据库事务的基础知识进行学习. 何为数据库事务 “ ...
- Unity中对SQL数据库的操作
在Unity中,我们有时候需要连接数据库来达到数据的读取与储存.而在.NET平台下,ADO.NET为我们提供了公开数据访问服务的类.客户端应用程序可以使用ADO.NET来连接到数据源,并查询,添加,删 ...