Vue中slot是什么?有什么作用?原理是什么?

slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽。

  • 默认插槽:又名匿名查抄,当slot没有指定name属性值的时候一个默认显示插槽,一个组件内只有有一个匿名插槽。
  • 具名插槽:带有具体名字的插槽,也就是带有name属性的slot,一个组件可以出现多个具名插槽。
  • 作用域插槽:默认插槽、具名插槽的一个变体,可以是匿名插槽,也可以是具名插槽,该插槽的不同点是在子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理: 当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm.$slot中,默认插槽为vm.$slot.default,具名插槽为vm.$slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,遇到slot标签,使用$slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。

相关推荐
该用户已不存在1 分钟前
免费 SSL 证书缩短至 90 天,你的运维成本还能hold住吗
前端·后端·https
七月十二17 分钟前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
米花丶18 分钟前
解决前端监控上报 Script Error实践
前端·javascript
JarvanMo20 分钟前
如何在 Flutter 应用中大规模实现多语言翻译并妥善处理 RTL(从右到左)布局?
前端
Haha_bj21 分钟前
iOS深入理解事件传递及响应
前端·ios·app
1024小神21 分钟前
用html和css实现放苹果的liquidGlass效果
前端
拜晨21 分钟前
CG-01: 深入理解 2D 变换的数学原理
前端
im_AMBER23 分钟前
Canvas架构手记 07 状态管理 | 组件通信 | 控制反转
前端·笔记·学习·架构·前端框架·react
JarvanMo27 分钟前
理解 Flutter 中的 runApp() 与异步初始化
前端
掘金安东尼27 分钟前
🧭 前端周刊第442期(24–30 Nov 2025)
前端