vue2 插槽：单个插槽、具名插槽和数据插槽

已于 2023-08-09 09:26:27 修改
阅读量1.5k 收藏 1
点赞数
分类专栏： 前端JS框架：vue2 文章标签： vue-cli 插槽 插槽传值 具名插槽
于 2019-07-08 00:16:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42618566/article/details/95041276
版权
本文详细介绍了Vue2中的插槽使用，包括单个插槽、具名插槽以及作用域插槽（数据插槽）。通过示例展示了如何在子组件中定义插槽，以及父组件如何填充和接收数据，强调了具名插槽可以实现多个插槽并存，而作用域插槽允许子组件向父组件传递数据。
摘要由CSDN通过智能技术生成

首先在子组件中给出插槽<slot></slot>
在这里插入图片描述
然后就可以在父组件中给插槽插入以元素了
在这里插入图片描述
看看这两个元素是不是在ADD组件的插槽里放的呢
在这里插入图片描述
果然是啊，图1可以看到我们给ADD组件一个class=“add”。插入的元素是在class为add里面。

上面说的是单个插槽，下面说下具名插槽

就是给插槽起个名字，这样子组件就可以同时留有多个插槽
操作如下：
1.在子组件中给每个slot插槽一个属性name，name等于什么就是起的什么名字
在这里插入图片描述

了解本专栏 订阅专栏 解锁全文 超级会员免费看
美酒没故事°
关注
专栏目录
订阅专栏
Vue 中的插槽（Slot）：灵活组合组件的利器
m0_58013334的博客
08-19 324
在 Vue.js 中，插槽（Slot）是一种强大的特性，允许我们在组件中定义可扩展的模板部分，以便在使用组件时进行动态内容的填充。本文将介绍 Vue 中的插槽，以及它们在组件化开发中的作用和使用方式。
Vue中具名插槽
fdsal的博客
03-24 5373
具名插槽 有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件： <div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --&g
【Vue3】具名插槽
最新发布
又言又语
08-01 568
本文介绍 Vue3 中如何使用具名插槽。默认插槽具名插槽作用域插槽具名插槽，顾名思义是指带有名字的插槽，一个组件中只能包含一个默认插槽，当存在多个插槽时便要使用具名插槽。
Vue知识点总结(16)——具名插槽（超级详细）
CreatorRay的博客
01-08 1727
上节我们了解了一下插槽的概念和用途，并且详细演示了一下匿名插槽的使用。 这期我们的任务是具名插槽。 从名字我们就可以看出区别，一个是匿名，一个是具名。 我们就不详细说插槽概念的东西了，直接演示具名插槽。 <div id="app"> <App></App> </div> <script> Vue.component('MBtn',{ template:` <but
具名插槽
飞上云端看彩虹
11-17 188
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>具名插槽</title> </head> <body> <div id="app">/div> <script...
vue 具名插槽
MCCLS的博客
07-26 7576
要点： 组件里面 写上插槽的名字 组件标签里面要写slot属性表示要往那个插槽里放 当多标签向一个插槽添加时,最好使用template包裹（代替掉div 少一层div） 只有在template标签里面才有的新写法 具名插槽：即具有名字的插槽 实现多插槽 如果想当然这样写 就会出现双份的 组件里面 写上插槽的名字 组件标签里面要写slot属性表示要往那个插槽里放 如果这边写多个也不会对插槽的内容进行覆盖 然后发现中...
Vue 插槽 具名插槽
可控的事情要谨慎，不可控的事情要乐观。
10-11 300
案例、 代码： <body> <div id='root'> <child content='<p> Dell</p>'></child> </div> <script> Vue.component('child',{ ...
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
10-15
单个插槽、具名插槽和作用域插槽是实现这一目标的关键工具，开发者可以根据需求选择合适的方式来组织和管理组件的内容。通过理解并熟练掌握这些插槽用法，可以更好地构建出高效、模块化的前端应用。
详解vue使用插槽分发内容slot的用法
10-17
Vue.js中的插槽（slot）是一种强大的机制，...无论是单个插槽、具名插槽还是作用域插槽，都可以根据实际的应用需求进行选择和使用。这使得开发者可以更加专注于业务逻辑的实现，而不必担心组件间的数据传递和展示细节。
详解vue slot插槽的使用方法
08-30
Vue 中的 Slot 插槽使用方法详解 Vue 中的插槽（Slot）是一种强大的功能，它允许开发者在组件中插入任意的内容，从而提高组件的灵活性和可重用性。下面，我们将详细介绍 Vue 中的插槽使用方法。 1. 单个 Slot ...
【Vue】具名插槽
热门推荐
one or only的博客
07-17 1万+
【Vue】具名插槽
Vue数据插槽
Ssucre的博客
05-12 430
Vue数据插槽1 使用注意事项示例 1 使用注意事项 1.数据插槽只能在<template v-slot="scope" ></template>标签中被定义 2.scope.row代表一行数据，我们需要从中拿出某一个数据使用 3.使用scope.row.id可以拿到这一行数据的id值 示例 <el-table-column label="操作">` <template v-slot="scope" > <template v
Vue学习:具名插槽
weixin_47295886的博客
03-08 128
使用 v-slot:插槽名称（必须使用template）给组件追加的内容slot="center" 插槽名称·使用template，包裹 同一个插槽名。当插槽过多，不只是一个。给插槽 添加name。
具名插槽的使用
qq_43539854的博客
01-11 3109
具名插槽则是当子组件需要显示不同的效果时使用具名插槽，通过name属性给插槽命名。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
vue常用插槽之“具名插槽“
空投在我怀里的博客
03-14 1375
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。 分类：默认插槽、具名插槽、作用域插槽 使用方式： 具名插槽： 父组件中： <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div&gt...
18-具名插槽
weixin_52135717的博客
11-19 122
18-具名插槽 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/vue.min.js"></script> <body> <div id="app"> <cpn> <span slot='l
Vue初学——插槽，具名插槽，作用域插槽
wfy17030212的博客
01-10 2639
插槽，具名插槽，作用域插槽
具名插槽用法
seimeii的博客
02-13 415
第一步 插槽定义 子组件中定义 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
Vue组件化：深入理解slot的单个与具名插槽应用
在父组件`Home.vue`中，我们可以为不同的插槽指定名称，比如`父组件的header</h1>` 和 `父组件的footer</h6>`。这样，当父组件引用`childComponment`时，这些内容会被分别插入对应的命名插槽中。 如果没有为插槽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

美酒没故事°

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值