使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容。
比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果
使用者关注轮播内容的静态效果,组件负责让其滚动起来
组件:
<div class="horse-lamp">
<div class="lamp">
<slot name="lamps"></slot>
</div>
<div class="lamp">
<slot name="lamps"></slot>
</div>
</div>
使用者:
<CarouselWidget>
<div slot="lamps">123</div>
</CarouselWidget>
这种实现方式对于初始化的数据是没问题的,但是不支持slot内容的动态绑定,这是因为
- vnode在vue中是唯一的
- 一个vnode只会和一个dom节点绑定
因此当组件使用者在声明节点时,因为只声明了一个div,后台只生成了1个vnode,最终虽然产生了2个div,但是vnode只和后面1个dom绑定了,当vnode修改时也只会修改1个dom
解法:slot-scope
使用slot-scope数据产生的每个slot都会产生一个新的vnode
组件:
<div class="horse-lamp">
<div class="lamp">
<slot name="lamps" :arr="arr"></slot>
</div>
<div class="lamp">
<slot name="lamps" :arr="arr"></slot>
</div>
</div>
使用者:
<CarouselWidget :arr="info.column">
<template scope="slotProps" slot="lamps">
<component v-for="(item, index) in slotProps.arr"
:key="info.id"
:is="templates[item.type]"
:item="item"
></component>
</template>
</CarouselWidget>
这种情况下component内容有改动,那么组件内容2个slot都会同步更新
项目使用的vue版本是2.4.2,更高级的vue的slot-scope语法可能不太一样
原文地址:https://segmentfault.com/a/1190000016747615
使用slot-scope复制vue中slot内容的更多相关文章
- windows下cmd时复制dos中的内容 错误信息等
16:28 2015/11/23小发现 windows下cmd时复制dos中的内容,错误信息等:鼠标右键选择标记,然后ctrl c 即可.
- vue中slot插槽
插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...
- vue 中slot 的具体用法
子组件 <template> <div class="slotcontent"> <ul> <!--<slot></sl ...
- vue中slot组件的使用
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...
- 浅谈Vue中Slot以及slot-scope
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
- vue中slot的用法案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中slot内容分发
<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...
- vue中slot的笔记
一言以蔽之:本来写在子组件里边的内容默认是不显示的,如果想相对于子组件在哪里进行显示,则使用slot标签代表占位符,代替那部分内容,是行间元素还是块级元素取决于原先的那个标签. 参考的连接是:http ...
- 分享vue中 slot用法
//slot默认用法 //slot带参数name用法
随机推荐
- Jmeter (二十六)逻辑控制器 之 Module Controller and Include Controller
Module Controller ---模块控制器 测试计划设置“独立运行没每个线程组” 线程组2中使用Module Controller执行线程组1中的Sampler: 紧接着,将线程组1disa ...
- 15.更新和删除数据--SQL
一.更新数据 更新(修改)表中的数据,可以使用UPDA TE语句.有两种使用UPDA TE的方式: 更新表中的特定行: 更新表中的所有行. 警告:不要省略WHERE子句 在使用UPDA TE时一定要细 ...
- [Java]ArrayList、LinkedList、Vector、Stack的比较
一.介绍 先回顾一下List的框架图 由图中的继承关系,可以知道,ArrayList.LinkedList.Vector.Stack都是List的四个实现类. AbstractList是一个抽象类,它 ...
- ZROI WC Round5 题解
ZROI WC Round5 题解 Problem A 题意 给定一个长度为 \(n\) 的序列,操作是交换两个相邻的数,要求将序列变成先单调不降再单调不升,求最小操作数,注意可以完全单调不降或者完全 ...
- Educational Codeforces Round 65 (Rated for Div. 2) B. Lost Numbers
链接:https://codeforces.com/contest/1167/problem/B 题意: This is an interactive problem. Remember to flu ...
- setTimeout的异步传输机制
setTimeout是异步的,在设置完setTimeout后,指定代码会在设定的时间后加入到任务队列,但并不是立即执行,js是单线程语言,所有的代码按顺序执行,即同步执行,同步执行的代码放在执行队列中 ...
- Django使用网站图标
默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若是没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个40 ...
- HDU 1176 免费馅饼 矩阵取数, dp + 滚动数组
http://acm.hdu.edu.cn/showproblem.php?pid=1176 首先可以处理出整张地图的状态. book[T][POS]表示第T秒,在第pos个地方有多少个馅饼. dp[ ...
- 专题《一》 mysql优化
从今天开始,在这里记录面试会问的问题,针对java高级开发,架构师方向. 1.数据库设计要合理.开发经验不同 设计表水平不同 影响后面操作 三范式:1------------原子约束,每列不可分割 ...
- c#基础3-方法的重载静态和非静态,字段属性,方法
方法的重载概念:方法的重载指的就是方法的名称相同给,但是参数不同.参数不同,分为两种情况1).如果参数的个数相同,那么参数的类型就不能相同.2).如果参数的类型相同,那么参数的个数就不能相同.***方 ...