vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
心之语歌14 分钟前
flutter 父子组件互相调用方法,值更新
前端·javascript·flutter
岱宗夫up37 分钟前
FastAPI进阶3:云原生架构与DevOps最佳实践
前端·python·云原生·架构·前端框架·fastapi·devops
赛博切图仔38 分钟前
告别“打字机”:Generative UI 如何重塑 AI 时代的前端交互?
前端·人工智能·ui
wangbing112540 分钟前
开发指南141-类和字节数组转换
java·服务器·前端
~央千澈~40 分钟前
抖音弹幕游戏开发之第15集:添加配置文件·优雅草云桧·卓伊凡
java·前端·python
wsad053243 分钟前
Shell 脚本中的多行注释和 Here Document 语法解析
前端·chrome
肖。35487870941 小时前
html中onclick误区,后续变量会更改怎么办?
android·java·javascript·css·html
Lee川1 小时前
从字符串操作到数组映射:一次JavaScript数据处理的深度探索
javascript
随逸1771 小时前
《React 性能优化:useMemo 与 useCallback 实战》
javascript·react.js
J2虾虾1 小时前
Vite前端项目构建
前端