vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
罗超驿13 小时前
18.Web API 实战:元素与表单属性的获取和修改
开发语言·前端·javascript
边界条件╝13 小时前
微前端进阶(四)
前端·状态模式
无风听海13 小时前
JSON Web Token(JWT)完全指南
java·前端·json
山河已无恙13 小时前
BPF-eBPF 开发路线二:libbpf、CO-RE 与 libbpf-bootstrap认知
javascript·bootstrap·php
IT_陈寒13 小时前
Python闭包里藏的这个坑,差点让我加班到凌晨
前端·人工智能·后端
IT_陈寒13 小时前
Java注解空指针?这个坑我踩得莫名其妙
前端·人工智能·后端
H0r1zon.14 小时前
PinCopy:双击 Ctrl,把剪贴板「钉」在屏幕上
前端
kyriewen14 小时前
大厂面试新规:不会用AI编程,直接挂
前端·面试·ai编程
努力找实习的前端小白14 小时前
useImperativeHandle,useRef,forwardRef的协作关系
前端·面试
ZengLiangYi14 小时前
React Query + REST API 最佳实践
javascript·后端·react.js