ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

slot插槽

2022-08-05 13:33:16  阅读:199  来源: 互联网

标签:slot name 作用域 插槽 prop 组件


一、插槽的基本使用

1、个人通俗理解:

slot相当于给子组件挖出了一个槽,可以用来填充内容。

父组件中调用子组件时,子组件标签之间的内容元素就是要放置的内容,它会把 slot 标签替换掉。

2、官网解释

https://staging-cn.vuejs.org/guide/components/slots.html#named-slots

二、具名插槽

1.适用场景

很多时候我们子组件中都不止只有一个 slot,比如一个组件,我们可能允许调用时同时传入 name age addres 等等,这个时候如果子组件中只有一个 slot,那么为了一一对应渲染 可以分别给 slot 和内容都加上一个名字,插入插槽的时候按照名字一一对应

官网图解很清晰 v-slot:name该指令需要作用在 template 元素上(简写为#name)(不写插槽名的默认为default)

 

三、动态插槽名

1.适用场景

具名插槽给插槽命名的时候都是直接写死的,但大多数情况下我们都需要动态给插槽命名

直接用[动态名 ]即可

 

 四、作用域插槽

1.适用场景

其实插槽的使用有点类似于父子组件传递,只不过插槽传递的是模板内容,当我们想传递数据时 就可以像prop那样 向一个插槽的插口上传递 attribute:

子组件:

 

 父组件接收时通过v-slot组件接收到的是一个prop 对象

 

 可以将作用域插槽类比为一个传入子组件的函数。子组件会将相应的 prop 作为参数去调用它

官方图解

 

 五、具名作用域插槽

1.适用情景

顾名思义,就是想一对一具体的渲染数据处理数据,插槽 props 可以作为 v-slot 指令的值被访问到:v-slot:name="slotProps",缩写为#name="slotProps"(v-slot="slotProps" 可以类比这里的函数签名,和函数的参数类似,我们也可以在 v-slot 中使用解构形式)

官方例子

 

标签:slot,name,作用域,插槽,prop,组件
来源: https://www.cnblogs.com/SonderJie/p/16553966.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有