vue插槽

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

具名插槽:

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

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

默认插槽:

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

作用域插槽:

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

相关推荐
阿正的梦工坊4 分钟前
React:构建用户界面的JavaScript库
javascript·react.js·ui
行走的陀螺仪12 分钟前
[特殊字符] JavaScript 设计模式完全指南:从入门到精通(含20种模式)
开发语言·javascript·设计模式
zhangxingchao13 分钟前
AI应用开发五:RAG高级技术与调优
前端·人工智能·后端
KaMeidebaby24 分钟前
卡梅德生物技术快报|单 B 细胞抗体技术:全犬源单抗制备流程、关键参数与性能验证
前端·数据库·其他·百度·新浪微博
hazel35 分钟前
网络与工程化
前端
胡萝卜术1 小时前
《JavaScript 语言精粹》第三章精读:对象——最基础也最容易被误解的基石
javascript
甜味弥漫1 小时前
一篇文章搞懂CSS中的定位布局
前端
A南方故人1 小时前
vue3常用指令以及注册
前端·javascript·vue.js
AeahKa1 小时前
ztree 依赖问题解决记录
前端·webpack
子兮曰1 小时前
AI Coding 为什么全选了 TUI?从 Claude Code 到 Codex CLI,终端架构的底层逻辑
前端·后端·ai编程