Vue2 Slot插槽

最新推荐文章于 2023-07-27 17:04:53 发布
最新推荐文章于 2023-07-27 17:04:53 发布
阅读量360 收藏
点赞数 1
文章标签： html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52617498/article/details/127056032
版权

插槽让组件的复用，更加灵活。

有没有试过，在定义的组件标签中输入内容，浏览器其实是不渲染的，如果想要接收这些内容，就需要使用到 插槽Slot

匿名插槽

在子组件中，添加 slot 标签 <slot></slot>,这样就能接收在 组件标签中写入的所有内容。

<slot></slot>的位置，就决定了接收的内容的位置

具名插槽

有时候，接收回来的数据，想以一些排列的规则来规定它的位置，但匿名插槽会将所有的内容都填入那个指定位置，这不是想要的。

那么，在 子组件中定义 <slot name='top'></slot> 添加上 name属性，在父组件中调用子组件时，子组件内的新增内容标签 添加上 slot='top' 属性即可  <span slot='top'>这在上方</slot>

作用域插槽

如果 （在父组件中调用）子组件中的插槽内容希望使用到子组件中的数据，必须使用到 作用域插槽   <slot name="btn" :myname="num"></slot> （子组件中）   

子组件标签中 <button slot="btn" slot-scope="obj">click {{obj.myname}}</button>  

slot-scope="obj" 专门接收（slot）对应的 子组件身上slot标签上的属性，作为 obj的属性

作用域插槽还有其他的写法

Williert
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2[初级] solt插槽使用
u011664286的博客
09-23 232
vue slot插槽 动态替换子组件内容 局部刷新
Vue2实现无限级递归组件渲染
最新发布
ThinkLess404的专栏
03-22 1122
但后期项目实施去设计时需要同时操作多个组件的的显示切换，就想着做一些常用的布局组件如Tab布局组件（可以切换多个tab页进行布局），分支布局组件（根据配置的条件显示不同的内容），可以把那些子组件放到这个布局组件中渲染，当然布局组件也可以进行嵌套。网上搜索Vue的递归组件渲染示例，通常都是官方示例类似的树组件渲染，其递归渲染的也是其组件本身。但本人的需求是递归渲染一类组件。比如：一个画布下有文本组件，Tab布局组件，Tab布局组件中又包含了分支布局组件，分支组件中又嵌套了Tab布局组件，文本组件等。
vue2的slot插槽
qq_43203949的博客
12-18 3292
vue的slot插槽 1.定义插槽 插槽使用slot标签来标识，并且插槽是放在组件的template模板里面的，vue允许向组件传递模板。Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot元素作为承载分发内容的出口。 定义模板 <!--假设这个组件叫my-com--> <!--组件模板如下：--> <template> <div> <p>------------
【vue2】插槽slot
qq_40605334的博客
04-21 759
//app.vue <slot-text>内容</slot-text> components:{ SlotText } //slotText.vuue <slot></slot> //这里显示内容 作用域插槽 //子组件 <slot :user="user"></slot> //将组件中user数据传到父组件中 //父组件 <slot-text> <template v-slot:def.
Vue2.x 插槽slot学习笔记
黄彪博客
05-29 759
文章目录一、slot插槽分类——具名插槽、默认插槽具名插槽默认插槽（没有slot名字）案例二、作用域插槽具名插槽作用域默认插槽作用域具名插槽和默认插槽混合使用三、API $slots$slots 概念案例说明思维导图和附件 一、slot插槽分类——具名插槽、默认插槽 具名插槽 具名插槽定义（三种） <div> <slot name="up"></slot> </div> <div> <span slot="up"></s
Vue2----插槽slot
0 error(s), 0 warning(s)
10-12 439
Vue2中插槽的三种使用方式
Vue2.0 slot插槽
yasinawolaopo的博客
01-03 2344
Vue2.0 slot插槽就是给使用者挖个坑，具名插槽就是给多个插槽取个名字，可以分清楚;作用域插槽就是数据放在插槽这个，但是可以给使用者使用数据，使用这个可以灵活更改结构
vue中的 $slot 获取插槽的节点实例
10-16
今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
详解vue slot插槽的使用方法
08-30
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue学习之slot插槽
01-07
slot插槽 ---------------------------- 123 456 789 //slot比较特殊，所以导入的时候不能直接写slot import slots from @/components/slot export default{ data(){ return{ } }, components:{ ...
vue插槽slot的简单理解与用法实例分析
10-15
主要介绍了vue插槽slot的简单理解与用法,结合实例形式分析了vue插槽slot的功能、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下
Vue2的插槽
Raccon_的博客
01-28 561
插槽 插槽(slot)是vue为组件的封装提供的功能。 允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。 即在组件调用的标签中把自定义内容插入对应的组件的slot区域 <!-- 父组件中的引用 --> <Left> <p>在Left组件的内容区域，声明的p标签</p> </Left> <!-- 子组件中的插槽区域 --> <!-- slot声明一个插槽区域 --> <!-- vue官方规定:
vue2---插槽
qq_61950936的博客
07-28 3781
vue2学习之插槽，概念的基本使用，插槽的基本使用，具名插槽（带有name的插槽）
Vue2基础八、插槽
李宥的博客
07-27 1301
插槽 - 作用：让组件内部的一些 结构 支持 自定义
vue2插槽相关 v-slot使用方法 具名插槽和作用域插槽 新旧写法
qq_41348755的博客
02-07 2204
概念区别 具名插槽：同时有多个插槽时如何区分，为每个插槽指定名字就可以了 作用域插槽：如何在父组件中使用子组件的数据来自定义插槽内容，简单理解：子中插槽默认展示自己内部的数据，但是父想对这个数据做一下拼接展示，那么问题来了，父子是不同的作用域，父如何拿到子的数据呢，作用域插槽就是为了解决这个问题 先看一下旧的： 一、2.6之前已废弃语法： 1.具名插槽： 写法 子组件：为slot指定名字 <div class="container"> <header> <slot
Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)
weixin_43026567的博客
03-26 803
slot 翻译为插槽，插槽的目的是让我们原来的设备具备更多的扩展性。vue组件中使用插槽，也是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。 vue2.6.0之前用法 单个插槽(默认/匿名插槽) 在子组件中，使用特殊的元素 就可以为子组件开启一个插槽，该插槽插入什么内容取决于父组件如何使用。 具名插槽 当子组件的功能复杂时，子组件的插槽可能并非是一个。 比...
vue2插槽语法（slot元素）
qq_38969618的博客
02-03 313
vue2插槽语法
vue+slot插槽
12-26
Vue中的插槽（slot）是一种用于在组件中插入内容的机制。它允许我们在组件的模板中定义一些占位符，然后在使用该组件时，可以将具体的内容插入到这些占位符中。 在Vue 2.x版本中，我们可以使用`<slot>`元素来定义插槽，并使用`<slot>`元素的`name`属性来定义具名插槽。例如： ```html <template> <div> <slot></slot> <!-- 默认插槽 --> <slot name="header"></slot> <!-- 具名插槽 --> <slot name="footer"></slot> <!-- 具名插槽 --> </div> </template> ``` 然后，在使用该组件时，我们可以在组件标签中插入内容，这些内容将会替换对应的插槽。例如： ```html <my-component> <p>默认插槽的内容</p> <template v-slot:header> <h1>具名插槽header的内容</h1> </template> <template v-slot:footer> <p>具名插槽footer的内容</p> </template> </my-component> ``` 在Vue 3.x版本中，为了统一插槽的语法，引入了`v-slot`指令，取代了`slot`和`slot-scope`这两个在Vue 2.x中已被废弃但仍可使用的属性。使用`v-slot`指令时，可以直接在组件标签上使用，而不需要再使用`<template>`元素。例如： ```html <my-component> <template #default> <p>默认插槽的内容</p> </template> <template #header> <h1>具名插槽header的内容</h1> </template> <template #footer> <p>具名插槽footer的内容</p> </template> </my-component> ``` 需要注意的是，在Vue 3.x中，只能使用`v-slot`指令来定义插槽，而不能再使用`slot`和`slot-scope`属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值