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

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

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

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

相关推荐
江城开朗的豌豆7 小时前
从 JavaScript 到 TypeScript:我为什么选择了类型守护
前端·javascript
杨超越luckly8 小时前
HTML应用指南:利用POST请求获取全国爱回收门店位置信息
大数据·前端·python·信息可视化·html
源码站~8 小时前
基于SpringBoot+Vue的健身房管理系统
vue.js·spring boot·后端·毕业设计·前后端分离·管理系统·健身房
鹏多多8 小时前
解锁flutter弹窗新姿势:dialog-flutter_smart_dialog插件解读+案例
前端·flutter·客户端
IT_陈寒8 小时前
Redis 7.0的这个新特性让我处理百万级QPS轻松了50%,你可能还不知道!
前端·人工智能·后端
2301_796512528 小时前
Rust编程学习 - 如何快速构建一个单线程 web server
前端·学习·rust
蒜香拿铁8 小时前
Angular【核心特性】
前端·javascript·angular.js
天天向上10249 小时前
vue3 css使用v-bind实现动态样式
前端·css·vue.js
艾小码9 小时前
前端新手必看!困扰90%人的10个JavaScript问题,一次性帮你解决
前端·javascript
xixixin_12 小时前
【React】为什么移除事件要写在useEffect的return里面?
前端·javascript·react.js