vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
小码哥_常5 小时前
安卓开发秘籍:解锁10大性能优化秘诀
前端
谁呛我名字5 小时前
JavaScript 类型转换与运算规则
javascript
try2find6 小时前
打印ascii码报错问题
java·linux·前端
郑州光合科技余经理6 小时前
同城O2O海外版二次开发实战:从支付网关到配送算法
开发语言·前端·后端·算法·架构·uni-app·php
冰暮流星7 小时前
javascript事件案例-全选框案例
服务器·前端·javascript
Dillon Dong7 小时前
【系列主题】Next.js 16 + Turbopack 的暗礁:深入剖析 Tailwind v4 的 CSS 模块解析陷阱
javascript·css·容器·turbopack
Csvn7 小时前
前端性能优化实战指南
前端
Moment7 小时前
2026 年,AI 全栈时代到了,前端简历别再只写前端技术了 🫠🫠🫠
前端·后端·面试
糯米团子7497 小时前
Web Worker
开发语言·前端·javascript
freewlt8 小时前
React Server Components 深度解析
前端·react.js·前端框架