使用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用法
随机推荐
- 2017ACM/ICPC广西邀请赛 CS Course
题意:删除指定数字,求剩下数字的与或非值 解法:保存一下前缀和后缀 #include <iostream> #include <stdio.h> #include <ve ...
- Net Core应用,在CentOS上运行
Net Core应用,在CentOS上运行 本文主要介绍下运用docker虚拟技术打包Asp.net core应用. Docker作为一个开源的应用容器引擎,近几年得到广泛的应用,使用Docker我们 ...
- SSIS-Dtsx包文件打开时一直验证
把每个项的DelayValidation设置为true. 也可以直接改文件: 把文件里的 <DTS:Property DTS:Name="DelayValidation"&g ...
- spirngmvc整合mybatis
一.建立一张简单的User表 CREATE TABLE `users` (`id` int(20) NOT NULL AUTO_INCREMENT,`name` varchar(20) NOT NUL ...
- 项目部署到centos7云端验证码出现乱码
原因:linux系统字体和设置验证码的字体不一致 参考文献: https://www.whatled.com/post-6169.html 本次项目我使用的字体是 Arial
- 【转载】【MVC 学习 Razor语法】
Razor是MVC3中才有的新的视图引擎.我们知道,在ASP.NET中,ASPX的视图引擎依靠<%和%>来调用C#指令.而MVC3以后有了一套新的使用@标记的Razor语法,使用起来更灵活 ...
- 提升Java代码质量(一)
博主双12入手了一本"Effective Java第二版",本系列文章将初步梳理书中内容,我也查了些资料,我会针对知识点做一点展开,方便以后复习回顾; Item1.考虑用静态工厂代 ...
- zblog去除底部版权信息 “请勿修改或删除主题版权及作者信息”
场景:使用了免费模板,但底部带作者版权.删除版权信息的代码后访问前台弹窗:请勿修改或删除主题版权及作者信息... 1. 删除版权信息代码 使用notepad++搜索功能,搜索版权信息:如ABC,找到相 ...
- Word通配符
通配符模式下: ^13表示回车,^32表示空格 第一步,使用通配符替换掉无关文本 M?G-C??[A-Z]{1,20}_[A-Z]{1,20}_201?????_?? VirtualTrial[0-9 ...
- 【深度精讲】JFinal中的Ret和Kv工具类的区别,你用对了吗?
在JFinal中有两个类Map的工具类,一个是有状态的Ret,一个是无状态的Kv,各种自己的应用场景,你用对了吗? 下面我们从多个方面来探究一下,JFinal针对这两个类的设计: 一.位置-com.j ...