Vue基础-匿名插槽与作用域插槽的合并和覆盖行为
Vue 测试版本:Vue.js v2.5.13
Vue 文档:
<slot>
元素可以用一个特殊的特性name
来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应slot
特性的元素。仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。
具体应用的时候:
1、匿名插槽的合并行为:
<div id="app">
<myele>
<div>
default slot
</div> <div>
<div>from parent!</div>
<div>from parent!</div>
</div> </myele>
</div>
window.onload = function() {
Vue.component('myele', {
template: `
<div>
<slot></slot>
</div>
`
}); new Vue({
el: '#app'
});
};
效果:内容合并
2、匿名作用域插槽的覆盖行为:
<div id="app">
<myele>
<div slot-scope="props">
<div>from parent!</div>
<div>from {{props.text}}</div>
</div>
<div slot-scope="prop">
<div>from </div>
<div>{{prop.text}}</div>
</div>
</myele>
</div>
window.onload = function() {
Vue.component('myele', {
template: `
<div>
<slot text="child"></slot>
<slot text="child2"></slot>
//即使 text 和上一行一样,也不会报错,开发环境
</div>
`
}); new Vue({
el: '#app'
});
};
效果:以靠后的作用域插槽模板为准,绘制了两遍;
3、匿名插槽模板和作用域插槽模板混合:
<div id="app">
<myele>
<div>
default slot
</div>
<div slot-scope="props">
<div>from parent!</div>
<div>from {{props.text}}</div>
</div>
</myele>
</div>
window.onload = function() {
Vue.component('myele', {
template: `
<div>
<slot></slot>
<slot text="child"></slot>
</div>
`
}); new Vue({
el: '#app'
});
};
效果:匿名插槽以匿名作用域插槽模板为准进行渲染,即使你把匿名插槽模板放后面,也是一样的结果;
由此可以看出,最好不要使用匿名、默认插槽,最好使用具名插槽,可以减少不确定性;
参考文档:
https://cn.vuejs.org/v2/guide/components.html#具名插槽
Vue基础-匿名插槽与作用域插槽的合并和覆盖行为的更多相关文章
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- VUE.js入门学习(5)- 插槽和作用域插槽
插槽: (1)用法 以前的写法:如果内容很多的话,就很烂了- 插槽写法:(PS:组建名不能用保留关键字) (2)具名插槽 (3)作用域插槽 必须template开始和结尾,这个插槽要声明我从子组建接收 ...
- [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽,匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
- Vue组件之作用域插槽
写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...
- [译] 我最终是怎么玩转了 Vue 的作用域插槽
原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...
随机推荐
- 在iOS App中增加完整的照片多选功能
转自:http://blog.csdn.net/jasonblog/article/details/8141850 主要参考了ELCImagePickerController,不过由于UI展现上需要定 ...
- Spring学习12-Spring利用mock进行单元测试
一.概述 对于Java组件开发者来说,他们都盼望拥有一组能够对组件开发提供全面测试功能的好用的单元测试.一直以来,与测试独立的Java对象相比,测试传统型J2EE Web组件是一项更为困难的任务 ...
- oracle 快速批量插入复杂数据的内容
最近迷上一种批量插入的方法,一句sql解决,将需要插入的数据用with as 的方式查出来,不管多么复杂的sql,都可以用临时表的方式查出来,然后直接插入,这样代码更加清晰 流程也简单 insert ...
- gdb,程序调试助手
启动GDB:(其中我的app是编译之后的可执行文件) 退出命令:quit或者简写q 帮助获取: gdb通过完备的在线帮助,使我们使用起来更加方便.所有的帮助信息都是通过help命令获得的,运行help ...
- cf 459c Pashmak and Buses
E - Pashmak and Buses Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I ...
- spoj687(后缀数组)
http://www.spoj.com/problems/REPEATS/ 题意:给一串字符,需要你求这一串字符中有连续重复的字符的重复次数....... 思路:这是和poj3693一种类型的题目.. ...
- Cannot proceed with delivery: an existing transporter instance is currently uploading this package
当使用Xcode的Application Loader上传spa到AppStore的过程中,如果临时中断,当你再次进行上传的过程时,就发发现如下现象: Cannot proceed with deli ...
- 亿级日PV的魅族云同步的核心协议与架构实践(转)
云同步的业务场景 这是魅族云同步的演进,第一张是M8.M9,然后到后面的是MX系统,M9再往后发展,我们的界面可以看到基本上是没有什么变化的,但本质发生了很大的变化,我们经过了一些协议优化,发展到今天 ...
- 面向对象设计原则二:开闭原则(OCP)
开闭原则(OCP)定义:对扩展开发,对修改关闭.好处: 适应性和灵活性. 稳定性和延续性. 可复用性与可维护性. 解释说明:开闭原则指的是两方面:对功能扩展开发,对修改进 ...
- js获取textaera对象(object)的值
for(i in pstrWord ){ alert(i); //获得属性 alert(pstrWord[i]); //获得属性值 } 1.js输出object对象方法如下: function wri ...