vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
超人不会飞_Jay1 分钟前
2026.6.4 Vue用户中心项目笔记
前端·vue.js·笔记
copyer_xyf4 分钟前
Python 函数全面总结
前端·后端·python
时寒的笔记4 分钟前
瑞数案例欧冶解读py和js文件最终版
开发语言·javascript·ecmascript
怕浪猫8 分钟前
Electron 开发实战(十):应用打包与分发|全平台打包、签名、自定义协议实战
前端·javascript·electron
我是伪码农13 分钟前
小程序175-200
前端·javascript·小程序
懂懂tty16 分钟前
Vue3 编译优化
前端·javascript·vue.js
低保和光头哪个先来22 分钟前
源码篇 生命周期
前端·javascript·vue.js
持敬chijing23 分钟前
Web渗透之SQL注入-盲注(布尔盲注,时间盲注)
前端·sql·oracle
AI_零食23 分钟前
鸿蒙PC Electron框架天天饮水应用深度解析:健康饮水管理系统
javascript·华为·信息可视化·electron·开源·鸿蒙
NGINX开源社区34 分钟前
NGINX Ingress Controller 中的 Cache Policy:VirtualServer 实战指南
java·前端·nginx