Vue关于插槽slot的传值使用

已于 2023-08-30 17:53:29 修改
阅读量2.6k 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript vue
于 2023-08-30 17:36:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51491855/article/details/132587276
版权

默认插槽

父组件使用子组件时，在子组件标签内添加自定义内容，子组件的在slot处接收并展示

父组件在子组件起始标签和结束标签之间的添加内容，此处作为添加内容的入口 子组件将 标签之间承载分发的内容，此处作为承载内容的出口

具名插槽

父组件使用子组件时，在子组件中template标签内添加自定义内容(该template标签使用了v-slot:插槽名)，子组件的在slot处接收并展示(该slot标签使用了name="插槽名")

通过添加name名可以使用多个插槽，默认插槽只有1个，具名插槽可以有多个

具名插槽总结使用注意点 1.父组件在子组件标签内使用标签，并在template标签内添加内容，此处作为添加内容的入口 2.子组件将 标签之间承载分发的内容，此处作为承载内容的出口 3.两处插槽名必须相同，比如都是aaa

插槽的特殊情形

当子组件具名插槽使用为承载内容出口，父组件标签之间用来添加内容时，和默认插槽的使用基本上一样的，如下图

也有一点不一样，如果想要用插槽进行传值，就会用到template这个模板标签 (传值即把子组件的值传入父组件自定义内容中) 下图为子组件传值给父祖件

为什么要用scoped.data才能拿到值？

1.首先scoped是可以随便起的名字，也可以叫v-slot:default="res"或者v-slot:default="res1"再或者v-slot:default="其他"
2.之所以经常叫做scoped，是因为代表作用域的意思，准备的说scoped代表的是子组件的作用域可以访问到子组件内传的值，而父组件{{}}里的值都是父组件实例上的
3.另外也可以通过插槽传递多个不同的值，假设传了:data,:a,:bb,:ccc，父组件获取时就要 scoped.data,scoped.a,scoped.bb,scoped.ccc

下图传了很多值的代码

不一样的这一点，当使用了插槽传值，就称这个插槽为作用域插槽了
官网上有一句这样的话来描述作用域插槽：
有时让插槽内容能够访问子组件中才有的数据是很有用的

图为具名插槽结合作用域插槽传值，简称具名插槽传值，也是最常用的一种

下图为项目代码里slot的使用

明日复明日*
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue slot与传参实例代码讲解
10-17
主要介绍了vue slot与传参实例代码讲解，在文章末尾给大家介绍了vue 利用slot向父组件传值的方法,需要的朋友可以参考下
vue实现组件之间传值功能示例
10-18
主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
vue组件通信---父向子传递`标签数据`(slot插槽)
muzidigbig的博客
11-21 7411
一、理解 1.1此方式用于父组件向子组件传递`标签数据` 1.2插槽最后显示不显示是看父组件有没有在孩子里写模板 1.3对内容分发<插槽>的理解可以是占位符，标签替换，插槽 父组件中子标签放入带有插槽的内容，然后这些内容就会被分发到子组件中特殊的slot元素，根据name属性在子组件中重新组合，替换。 1.4作用域插槽|带数据的插槽：在作用域上绑定属性来将子组件的信息/数据传...
内置组件 -slot讲解
大灰狼的小绵羊哥哥的博客
07-21 1557
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。 转自http://jspang.com/2017/04/09/vue2_4/4/ 先来定义一个的组件，这个组件用来显示博主的一些信息。 我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能） 1234567data:{    jspang
vue2 插槽（默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 ）
最新发布
朝阳39的博客
03-22 724
插槽：用于在子组件的指定位置插入指定内容，类似在电梯里挂的若干广告显示屏，可以给指定的位置传入指定的广告。
详解vue slot插槽的使用方法
08-30
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue的slot传参
Wehter的博客
03-02 1398
Vue的slot传参
Vue----组件间传值与slot插槽
qq_40132294的博客
05-21 7585
1.父组件给子组件传值 在父组件App.vue中定义属性，然后将属性传给子组件 2.子组件获取父组件传递过来的数据：props:{}
vue slot插槽传值
qq_38909255的博客
06-18 6504
vue slot插槽传值,简洁版
VUE插槽/插槽传参
Fort_111的博客
04-03 5898
父组件 <template> <Son> <template slot-scope="scope"> //scope 所有数据 {{scope.data}} //'传传传传传' </template> <template slot="slots" slot-scope="scope"> //具名插槽 {{scope.msg}} //'参参参参参' </template> .
vue3组件之间通信(八)——作用域插槽之间的传值
weixin_44784401的博客
10-30 5824
vue3组件之间通信(八)——作用域插槽之间的传值
vue中的 $slot 获取插槽的节点实例
10-16
今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue使用插槽分发内容slot的用法
10-17
主要介绍了vue使用插槽分发内容slot的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
使用react context 实现vue插槽slot功能
10-16
主要介绍了使用react context 实现vue插槽slot功能，文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下
vue插槽slot的理解和使用方法
10-17
主要给大家介绍了关于vue中插槽slot的理解和使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue传递值传递，slot
qq_33332184的博客
05-30 7676
通过on，on，on，emit传值 具体实现方式 var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data => {}); 实现示例 a.vue <template> <div> <button @click="send">发送a</button>...
父子组件之间传递数据的方法
Issssy的博客
11-26 860
档子组件向父组件传递数据时，需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传来的数据。解释:当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现。当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。概念:父组件的数据改变了会自动流动到自组件，但是子不允许修改由props流过来的数据。
vue3 slot 传参
08-31
在 Vue 3 中，可以使用 `<slot>` 元素来传递参数给插槽内容。下面是一个示例： 首先，在父组件中定义一个插槽，并传递参数给插槽内容： ```html <template> <div> <slot :name="slotName" :age="slotAge"></slot> </div> </template> <script> export default { data() { return { slotName: 'John', slotAge: 25 } } } </script> ``` 然后，在子组件中使用插槽，并接收参数： ```html <template> <div> <slot v-bind:name="name" v-bind:age="age"></slot> </div> </template> <script> export default { props: { name: { type: String, default: '' }, age: { type: Number, default: 0 } } } </script> ``` 现在，当父组件使用子组件时，可以通过插槽传递参数： ```html <template> <div> <child-component> <template v-slot="{ name, age }"> <p>Name: {{ name }}</p> <p>Age: {{ age }}</p> </template> </child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent } } </script> ``` 这样，子组件就可以接收到父组件传递的参数，并在插槽中使用它们。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值