vue插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

具名插槽:

就是给插槽定义一个标识,因为有时候一个组件中可能会定义多个插槽,为了能够区分他们,就需要给他们定义一个标识。

当有多个插槽时,插槽增加了name属性来正确渲染对应的部分,父组件需要使用<template></template>。可以认为匿名插槽是特殊的具名插槽。

默认插槽:

可以为插槽定义默认内容,就和给props定义默认值一样,如果在父组件中没有传入,则使用默认内容。反之如果父组件有传入内容,则使用父组件传入的内容

作用域插槽:

让父级插槽内容能够访问子组件数据,数据从子组件往父组件流动。子组件通过插槽prop(任意个数)来绑定数据,父组件通过带值(命名随意)的v-slot来获取子组件的数据。

相关推荐
AI3D_WebEngineer2 分钟前
企业级业务平台项目设计、架构、业务全解之平台篇
前端·javascript·vue
该用户已不存在4 分钟前
免费 SSL 证书缩短至 90 天,你的运维成本还能hold住吗
前端·后端·https
汤姆Tom19 分钟前
前端转战后端:JavaScript 与 Java 对照学习指南 (第二篇 - 基本数据类型对比)
java·javascript·全栈
七月十二20 分钟前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
星空的资源小屋21 分钟前
Explorer++:更强大的Windows文件管理器
javascript·人工智能·django·电脑
米花丶21 分钟前
解决前端监控上报 Script Error实践
前端·javascript
JarvanMo23 分钟前
如何在 Flutter 应用中大规模实现多语言翻译并妥善处理 RTL(从右到左)布局?
前端
Haha_bj24 分钟前
iOS深入理解事件传递及响应
前端·ios·app
1024小神24 分钟前
用html和css实现放苹果的liquidGlass效果
前端
拜晨24 分钟前
CG-01: 深入理解 2D 变换的数学原理
前端