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 ...
随机推荐
- hibernate 中HQL查询
由于比较简单,在此处只写一些HQL语言. 表关系,多对一. CREATE TABLE `user` ( `id` ) NOT NULL AUTO_INCREMENT, `uname` varchar( ...
- django之整体复习
1. 配置文件: media: avatar = models.FileField(upload_to='avatar') sessiongs MEDIA_ROOT=os.path.join(BASE ...
- Netty(七):流数据的传输处理
Socket Buffer的缺陷 对于例如TCP/IP这种基于流的传输协议实现,接收到的数据会被存储在socket的接受缓冲区内.不幸的是,这种基于流的传输缓冲区并不是一个包队列,而是一个字节队列.这 ...
- fft分析前后频谱数据
正弦信号输入 input 输入的原始信号 short [128] fir 滤波后的输出信号 SHORT [128] fft 傅里叶变换后的freq数据 float [128] rmroise 去除底 ...
- NGUI和UGUI动画不能设置alpha值的问题
动画播放alpha参数改变但无实际画面效果,原因是要挂一个脚本,设置实时更新数据. NGUI void Update() { widget.SetDirty(); } UGUI void Update ...
- atitit. java jsoup html table的读取解析 总结
atitit. java jsoup html table的读取解析 总结 1. 两个大的parser ,,,jsoup 跟个 htmlparser 1 2. 资料比较 1 3. jsoup越佳. ...
- iOS代码技巧之判断设备及状态
转自:http://my.oschina.net/joanfen/blog/149076 一.判断设备 01 //设备名称 02 return [UIDevice currentDevice].nam ...
- A+P+M+W
安装之前先做个目录的安排, D盘根目录建立”Dev”文件夹,在文件夹下建立: Php Apache Mysql 三个文件夹 所需软件: 0. 安装Apache的前必须安装VC11 vcredis ...
- 【已解决】vbox + ubuntu 设置 1366x768 分辨率
1. 打开VBOX(Oracle VM VirtualBox),启动Ubuntu 2. 点击"设备>安装增强功能" 3. 进入Ubuntu打开文件管理器,如下图 4. 输入r ...
- android 获取屏幕高度和宽度 的方法
我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即可获取屏幕的尺寸. 在一个Activity的onC ...