vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
三翼鸟数字化技术团队16 分钟前
websocket及SSE原理解析
前端
妙码生花43 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(八):设计管理员模型、热重载配置
前端·后端·go
政采云技术1 小时前
Chrome 高阶调试技巧
前端
牧艺1 小时前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
秦瑜华1 小时前
前端页面添加AI自动翻译按钮
前端·openai·ai编程
沉浸学习的匿名网友1 小时前
什么是 .gitignore?为什么每个 Git 项目几乎都离不开它?
前端·git
Apifox1 小时前
从 Postman 迁移到 Apifox:Workspace、Collection、Environment 现在可以一起导入了
前端·后端·程序员
cidy_983 小时前
Agent\-Reach 保姆级教程|AI Agent 全网数据源扩展工具(免费无调用费)
前端
乘风gg3 小时前
当 AI 遇到私有组件,Cli 才是 AI Coding 的起点
前端·ai编程·cursor
40岁搬砖工3 小时前
直观高效的 VSCode 略缩图定位注释 MARK
前端