vue中的slot理解和使用
最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力。
在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue的相关环境,创建了一个项目,实际动手看看是什么东西,
现理解为: 用父组件的内容去替换掉子组件的内容;
根据父组件中的
<div slot="slot1">slottest</div>
如果引入的子组件中有
<slot name="slot1">123432<slot>
那么子组件的123432 将会被不显示,而是被替换为slottest;
在项目的实际应用如:假设我们的项目中有个搜索组件,其中搜索组件为:
用户的姓名,性别,电话号码: 该组件定义为组件1
组件1 可以被所有的页面所采用,但是在有些页面则会需要 添加一项:比如根据邮箱查询:
我们是重新写一个新的组件,还是通过修改我们写好的组件方便呢:
改造如下:在子组件中添加一个标签<slot name="othercondition"></div>
子啊父组件中:我们可以添加如下的代码:
<div slot="othercondition">
<label>邮箱<label><input type="Email">
</div>
这样改造的话,我们不需要重新新增一个项目文件,只需要在引用的父组件中添加几行代码就行了,这样就减少了代码量,同时方便插件的扩展;
vue中的slot理解和使用的更多相关文章
- vue中的slot与slot-scope
深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解
- Vue中的slot(占坑,预留位置)
Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...
- vue中keepalive怎么理解?---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- 深入理解vue中的slot与slot-scope
from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...
- vue 中的slot属性(插槽)的使用
总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...
- vue中的slot(插槽)
vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...
- vue中nextTick的理解
A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更 ...
随机推荐
- SQL 优化记录
1. 对Where 语句的法则 1.1 避免在WHERE子句中使用in,not in,or 或者having. 可以使用 exist 和not exist代替 in和not in. 可以使用表链接代 ...
- 倒排列表压缩算法汇总——分区Elias-Fano编码貌似是最牛叉的啊!
来看看倒排索引压缩.压缩是拿CPU换IO的最重要手段之一,不论索引是放在硬盘还是内存中.索引压缩的算法有几十种,跟文本压缩不同,索引压缩算法不仅仅需要考虑压缩率,更要考虑压缩和解压性能,否则会解压太慢 ...
- EMC 存储管理
第一章EMC 产品介绍 1.1. 名词介绍 DAE——磁盘笼.用于装载磁盘的柜子. ◆Disk processor enclosure——含磁盘的控制器单元.存储系统的主要设备,内含存 ...
- 91. ExtJS获取父子、兄弟容器元素方法
转自:https://blog.csdn.net/u014745818/article/details/44957341 1 1.当前对象的父对象(上级对象) this.ownerCt: 2.当前对象 ...
- JavaScript学习杂记
1.DOM层级:document(document) --> doctype,documentElement(html) --> head,body(body). 2.offset, cl ...
- 生成器模式(Builder)C++实现
意图:将一个复杂对象的创建与它的表示分离,使得同样的构建过程可以创建不同的表示. 适用性:1.当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 2.当构建过程必须允许被构建的对象有 ...
- css3动画之1--animation小例子
1.首先看效果 2.代码及分析 <style type="text/css"> #div1 { margin:100px; position: absolute; te ...
- winxp精简版没有IIS的解决办法
首先在“开始”菜单的“运行”中输入“c:\Windows\inf\sysoc.inf”,系统会自动使用记事本打开sysoc.inf这个文件.在sysoc.inf中找到“[Components]”这一段 ...
- poj1101 the game 广搜
题目大意: 类似于连连看,问从起点到终点最少需要几条线段. 规则: 1.允许出界. 2.空格的地方才能走. 分析: 题目做下来发现没有卡时间,所以主要还是靠思路.也就是说不用考虑离线算法.直接以每个起 ...
- MYSQL 代码删除和添加表格列方法
一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...