vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
38242782712 小时前
python:正则表达式
前端·python·正则表达式
用户479492835691512 小时前
我是怎么把模型回复用tts播放的更自然的
前端
JS_GGbond12 小时前
前端崩溃监控:给网页戴上“生命体征监测仪”
前端
俊劫12 小时前
AI 编码技巧篇(内部分享)
前端·javascript·ai编程
Maxkim12 小时前
一文读懂 Chrome CRX📦:你需要了解的核心知识点
前端·前端工程化
JackJiang12 小时前
AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
前端·websocket
Mr_chiu12 小时前
数据可视化大屏模板:前端开发的效率革命与架构艺术
前端
进击的野人12 小时前
一个基于 Vue 的 GitHub 用户搜索案例
前端·vue.js·前端框架
ZsTs11912 小时前
《2025 AI 自动化新高度:一套代码搞定 iOS、Android 双端,全平台 AutoGLM 部署实战》
前端·人工智能·全栈
命中水12 小时前
从怀疑到离不开:我第一个由 AI 深度参与完成的真实项目复盘
前端·openai