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

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

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

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

相关推荐
Benny的老巢1 天前
用 Playwright 启动指定 Chrome 账号的本地浏览器, 复用原账号下的cookie信息
前端·chrome
2501_941805311 天前
从微服务网关到统一安全治理的互联网工程语法实践与多语言探索
前端·python·算法
寧笙(Lycode)1 天前
前端包管理工具——npm、yarn、pnpm详解
前端·npm·node.js
小夏卷编程1 天前
vue2 实现数字滚动特效
前端·vue.js
文心快码BaiduComate1 天前
嫌市面上的刷题App太丑,我让Comate帮我写了个“考证神器”
前端·产品
harrain1 天前
html里引入使用svg的方法
前端·svg
遗憾随她而去.1 天前
Webpack5 基础篇(二)
前端·webpack·node.js
Mintopia1 天前
🧭 一、全栈能力的重心正在从“实现” → “指令 + 验证”转移
前端·人工智能·全栈
Mintopia1 天前
2025,我的「Vibe Coding」时刻
前端·人工智能·aigc
Tinachen881 天前
YonBIP旗舰版本地开发环境搭建教程
java·开发语言·oracle·eclipse·前端框架