vue slot内容分发
时间:2019-09-17
本文章向大家介绍vue slot内容分发,主要包括vue slot内容分发使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当需要让组件组合使用,混合父组件的内容和子组件的模板的时候,就会用到slot。这个过程就叫内容分发。
最为常用的是两种slot:一种是匿名slot, 一种是具名slot。
匿名 很好理解: 就是默认,没有名字。 具名: 就是slot 有了name属性,有了名字。
下面来个综合的小demo:
父组件:
<div class="testslot">
我是TestSlot:父组件
<slot1>
<p style="color:red">balabala</p>
</slot1>
<br>
<br>
<h2>下面是一个具名插槽的test</h2>
<slot2>
<h3 slot="fr">frr</h3>
645112728@ahwdkhasdn.coaksdb
<p slot="br">ppppppppppppppp</p>
????
</slot2>
</div>
然后再slot1这个子组件中:(这个测试的是匿名slot)
<div class="slot1">
<div>我是slot1组件</div>
<slot></slot>
</div>
在slot2这个组件当中:
<div class="slot2">
<slot name="fr"></slot>
index <slot></slot>
<slot name="br"></slot>
</div>
可以看到效果如下:
理解: 在父组件当中,遇到子组件中 如果还有元素,基本就是开始slot了,然后就可以看那个子组件中对这个slot的调用了。
原文地址:https://www.cnblogs.com/whyaza/p/11532502.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 3分钟短文:为了你少跳坑,Laravel写好了用户授权
- 巧用ingest pipeline实现Elasticsearch索引的重定向
- leetcode之错误的集合
- vue-element怎么给select下拉框赋值?
- vue 怎么将Checkbox 多选框选中的值提交
- Chrome的小恐龙游戏自动躲避障碍物
- Three.js教程(5):光源
- Three.js教程(6):几何体
- Three.js教程(7):材质
- Keep APP技术研究
- Canvas系列(15):实战-小球拖拽
- Canvas系列(16):实战-小球与斜面碰撞
- Three.js教程(3):场景
- Three.js教程(4):相机
- 使用GithubActions自动部署应用到自己的服务器(ECS)