v-slot 是 Vue 3 统一推荐的插槽语法，取代 Vue 2 的 slot/slot-scope，支持默认、具名、作用域插槽及后备内容；必须用在 上，具名可简写为 #xxx，作用域插槽通过解构接收子组件传递的数据。
v-slot 是 Vue 3 中统一且推荐的插槽语法，用于在父组件中向子组件传递结构化内容。它取代了 Vue 2 中的 slot 和 slot-scope 属性，更清晰、更安全，也更符合指令命名规范。
默认插槽用法
当子组件只定义了一个无名 <slot></slot> 时，父组件可直接在组件标签内写内容，或显式使用 v-slot:default（等价于 v-slot）包裹：
- 简写形式（最常用）：
<mycard><p>主内容</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11189" title="Element Plus UI Vue3"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Element Plus UI Vue3" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11189" title="Element Plus UI Vue3">Element Plus UI Vue3</a> <p>Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。</p> </div> <a href="/xiazai/skill11189" title="Element Plus UI Vue3" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></mycard> - 完整写法：
<template v-slot:default><p>主内容</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></template> - 注意：
v-slot只能用在<template></template>上，不能直接写在普通 HTML 标签或组件上（除非是带作用域的场景）
具名插槽精准投递
子组件通过 <slot name="header"></slot> 定义多个插槽区域，父组件用 v-slot:xxx 或简写 #xxx 指定内容归属：
<template><h1>标题区</h1></template><template v-slot:footer><small>页脚说明</small></template>- 多个具名插槽可并列写在同一个父组件模板中，顺序不影响渲染位置
- 未匹配的具名内容不会被渲染，也不会 fallback 到默认插槽（除非显式留空）
作用域插槽传子组件数据
当子组件需要把内部数据“暴露”给父组件定制内容时，用带参数的 v-slot：
- 子组件中：
<slot name="item" :user="user" :index="index"></slot> - 父组件中：
<template user index><div>{{ index }}. {{ user.name }}</div></template> - 解构参数支持重命名、默认值、甚至嵌套对象解构：
v-slot:item="{ user: u, index: i = 0 }" - 作用域插槽本质是函数调用：子组件把数据作为参数传入，父组件决定怎么渲染
后备内容与空插槽处理
插槽本身可内置默认文案，当父组件未提供对应内容时自动显示：
- 子组件中：
<slot>暂无内容</slot>或<slot name="header">默认标题</slot> - 后备内容只在父组件完全没传该插槽内容时生效；哪怕传了个空
<template></template>，也会覆盖默认文案 - 想兼顾“有内容”和“无内容”逻辑，可在作用域插槽中判断参数是否为真值
