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基础-匿名插槽与作用域插槽的合并和覆盖行为的更多相关文章

  1. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  2. VUE.js入门学习(5)- 插槽和作用域插槽

    插槽: (1)用法 以前的写法:如果内容很多的话,就很烂了- 插槽写法:(PS:组建名不能用保留关键字) (2)具名插槽 (3)作用域插槽 必须template开始和结尾,这个插槽要声明我从子组建接收 ...

  3. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  4. Vue基础-作用域插槽-列表组件

    Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...

  5. vue作用域插槽的应用

    问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...

  6. 细说Vue作用域插槽,匹配应用场景。

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  7. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  8. Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...

  9. [译] 我最终是怎么玩转了 Vue 的作用域插槽

    原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...

随机推荐

  1. PHP设计模式系列 - 观察者模式处理订单(异步操作附加功能)

    观察者模式 观察者设计模式能够更便利创建和查看目标对象状态的对象,并且提供和核心对象非耦合的置顶功能性.观察者设计模式非常常用,在一般复杂的WEB系统中,观察者模式可以帮你减轻代码设计的压力,降低代码 ...

  2. Experience on Namenode backup and restore --- checkpoint

    Hadoop version: Hadoop 2.2.0.2.0.6.0-0009 Well, We can do this by building Secondary Namenode, Check ...

  3. shell学习笔记之控制结构(三)

    1.if语句 if condition then statements esle statements fi 例: #!/bin/sh echo "Is it morning? Please ...

  4. FreeRtos——任务删除,改变任务优先级

    以下转载自安富莱电子: http://forum.armfly.com/forum.php vTaskDelete() API 函数任务可以使用 API 函数 vTaskDelete()删除自己或其它 ...

  5. mysql实现topN top1

    有时会碰到一些需求,查询分组后的最大值,最小值所在的整行记录或者分组后的top n行的记录,像在hive中是有窗口函数的,可以通过它们来实现,但是MySQL没有这些函数,可通过下面的方法来实现 1.准 ...

  6. 转载:vim的复制,删除,粘贴,块操作以及快速替换功能

    掌握如下命令有什么好办法,我可以告诉你唯手熟尔!!多看多练对于VIM而言,复制,删除,粘贴的操作应该是非常多的.这次也做一个总结,关于处理VIM下的复制,删除,粘贴等操作.学会使用帮助文件,命令的帮助 ...

  7. DRBD安装配置、工作原理及故障恢复

    一.DRBD简介 DRBD的全称为:Distributed ReplicatedBlock Device(DRBD)分布式块设备复制,DRBD是由内核模块和相关脚本而构成,用以构建高可用性的集群.其实 ...

  8. Java,Mysql-根据一个给定经纬度的点,进行附近500米地点查询–合理利用算法

    Java,Mysql-根据一个给定经纬度的点,进行附近500米地点查询–合理利用算法   LBS 球面距离公式 http://wiki.myoa.info/zh-blog:20 Java,Mysql- ...

  9. 常用cmd

    net use 查询相应的共享文件 control userpasswords2--修改计算机的网络凭证 删除计算机记录的网络共享凭证 重启网络

  10. Differential Geometry之第六章平面曲线的整体性质

    第六章.平面曲线的整体性质 1.平面的闭曲线 1.1.切线的旋转指数定理 1.2.等周不等式与圆的几何特性 ,其中 2.平面的凸曲线 支撑函数: 2.1.Minkowski问题 2.2.四顶点定理