❌

阅读视图

发现新文章，点击刷新页面。

📰 前端资讯 - 2025年12月10日

✇掘金 前端
ZED

🔒 安全警告（重要）

React Server Components 严重安全漏洞：React2Shell（CVE-2025-55182）

  • React 团队披露了影响 React Server Components（RSC）的严重安全漏洞，被社区命名为 “React2Shell”，部分 Next.js 应用和使用 RSC 的框架都可能受影响。
  • Vercel 提供了针对 Next.js 用户的排查与升级指引，Cloudflare 在尝试提供自动防护时一度引发约 25 分钟的服务中断，说明云端防护与应用层安全之间的复杂互动。
  • 建议：尽快查看所用框架的安全公告和升级指南，评估是否启用 RSC、是否暴露潜在攻击面，并在升级前后做好监控与回滚策略。
  • 原文链接：React2Shell 官方站点、React 团队安全公告、Vercel 针对 Next.js 的安全通告、Cloudflare 相关事件报道

Node.js 计划于 12 月 15 日发布多条安全更新

  • Node.js 官方预计在 2025 年 12 月 15 日左右对 25.x、24.x、22.x 和 20.x 多个版本分支发布安全更新，涉及 5 个漏洞，其中 3 个为高危级别。
  • 这些更新会影响当前在生产环境中广泛使用的长期支持版本，建议提前关注发布说明、规划升级窗口并确保 CI/CD 流程覆盖关键路径回归测试。
  • 原文链接：December 2025 Security Releases 预告

npm 供应链与发布安全：Token 管理与工作流加固

  • GitHub 宣布撤销所有旧版 npm classic tokens，并引入 2 小时会话 token 与粒度更细的访问 token，以降低长期泄露风险。Seattle Times 工程团队分享了如何借助 pnpm 的客户端安全控制来增强依赖供应链防护。
  • 社区文章《No More Tokens》提倡彻底梳理 npm 发布链路：限制谁能发包、在哪里登录、如何减少持久 token 使用，并给出了多种锁定发布工作流的实践建议；Liran Tal 进一步补充了从组织维度制定 npm 安全策略的最佳实践。
  • 建议：审计组织中所有 npm token 和发布脚本，转向短时/粒度访问 token，限制发包机器和账号，必要时引入独立发布服务账户和双人审批流程。
  • 原文链接：GitHub 关于 npm token 的更新、新闻编辑部如何防御 npm 供应链攻击、No More Tokens: Locking Down npm Publishing Workflows、npm 安全最佳实践（Liran Tal）

🎉 重要里程碑

JavaScript 诞生 30 周年

  • 1995 年 12 月 4 日，Netscape 与 Sun 在新闻稿中正式宣布 “JavaScript”，至今已 30 年，这门最初在 10 天内完成原型的脚本语言，已经成为 Web 平台和大量应用生态的核心。
  • 本期回顾了当年新闻稿及 JavaScript 从 Mocha、LiveScript 到今天的演进，也提到围绕 JavaScript 商标的长期纠纷依然未完全解决。
  • 原文链接：JavaScript 30 周年回顾、1995 年官方新闻稿 PDF

Let’s Encrypt 十周年与 HTTPS 普及

  • Let’s Encrypt 已经运行十年，免费证书服务从早期推广 HTTPS 到如今即将覆盖近 10 亿站点，对 Web 安全和隐私起到了基础设施级的推动作用。
  • 文章通过数据对比展示了十年来 HTTPS 覆盖度的显著提升，以及自动化证书续期对开发者与运营效率的改善。
  • 原文链接：Ten Years of Let’s Encrypt

AV1 视频编码获得艾美奖

  • 开源视频编解码标准 AV1 因其对全球在线视频分发的影响，获得技术类艾美奖，体现了开放标准在画质与带宽效率上的长期价值。
  • 对前端与流媒体平台而言，AV1 的普及意味着在同等带宽下能提供更高质量的播放体验，同时也推动浏览器与硬件解码能力持续演进。
  • 原文链接：Alliance for Open Media Wins Emmy for AV1

📦 版本更新

React 19.2：进一步优化 INP 响应性能

  • 文章重点讨论了 React 19.2 在 Interaction to Next Paint（INP）指标上的改进，包括对交互调度、更新中断与调和策略的优化，以及相关调试工具的增强。
  • 对大规模交互页面，合理利用这些新机制可以降低长任务与卡顿概率，改善用户感知的响应速度。
  • 原文链接：React 19.2 Further Advances INP Optimization、INP 指标介绍

前端与全栈工具链重要发布

  • Vite 8 Beta

    • 版本号：v8.0.0-beta
    • 更新说明：构建管线迁移至 Rolldown，显著加快生产构建速度，并为后续能力扩展打下基础。
    • 原文链接：Announcing Vite 8 Beta

  • React Datepicker 9.0

    • 版本号：v9.0
    • 更新说明：新增时区支持、跨日期范围选择时间，以及一批可访问性与自定义能力相关的属性（可参考项目仓库和发布说明）。
    • 原文链接：React Datepicker 项目主页

  • Ant Design 6.x

    • 版本号：v6.x（本期聚焦 6 系列持续演进）
    • 更新说明：作为广泛使用的 React 组件库，新版本继续完善组件体验与设计语言细节。
    • 原文链接：Ant Design 更新日志

其他库更新

  • React Grid Layout 2.0：响应式拖拽布局系统，适用于仪表盘类应用。原文链接
  • Yet Another React Lightbox 3.27：现代 React Lightbox 组件更新。原文链接
  • react-geo v32.7.0：用于构建地图应用的 React 组件集。原文链接
  • Jotai 2.16：轻量灵活的原子化状态管理库更新。原文链接
  • jsdom 27.3：WHATWG DOM/HTML 标准的纯 JS 实现更新。原文链接
  • Prisma 7.1：流行的 Node.js/TypeScript ORM 版本更新。原文链接
  • pnpm 10.25：高效包管理器新版本，侧重性能与安全控制。原文链接
  • Prettier 3.7：主流代码格式化工具的版本更新。原文链接
  • Drizzle ORM 0.45：类型友好的 ORM 更新。原文链接
  • Express 5.2.x：经典 Node.js Web 框架小版本更新。原文链接
  • Neutralinojs 6.4：比 Electron 更轻量的桌面应用解决方案更新。原文链接
  • Chokidar 5.0：跨平台文件监听库更新。原文链接

🚀 技术动态

TypeScript 7：Go 重写带来的 10 倍编译性能展望

  • TypeScript 6.0 将是最后一个以 JavaScript 实现的版本，之后的 TypeScript 7.0 将基于 Go 重写，目标是实现约 10 倍的性能提升。
  • 文章介绍了迁移路线：6.0 作为“桥接版本”，未来 Go 版编译器将兼容现有工具生态，同时为更快的增量构建和大型代码库提供支持。
  • 原文链接：Progress on TypeScript 7 – December 2025

WebGPU 已在主流浏览器全面可用

  • WebGPU 现已在所有主要浏览器中获得支持，为前端带来更现代的 GPU 编程能力，可用于高性能 3D 渲染、科学可视化和机器学习推理等场景。
  • 相比 WebGL，WebGPU 抽象更贴近现代图形 API，支持更高效的资源管理与并行计算，为浏览器内高性能计算打开新空间。
  • 原文链接：WebGPU is now supported across all major browsers

Bun 被 Anthropic 收购：AI 驱动时代的 JS Runtime 走向

  • Anthropic（Claude 背后的公司）收购了 JavaScript/TypeScript 运行时 Bun，计划用于其 Claude Code 等智能开发工具，Bun 仍将保持开源并持续演进。
  • Bun 基于 JavaScriptCore，集成打包、测试和运行时能力，目标是“开箱即用”的高性能开发体验，这次收购也凸显了 AI 工具对基础运行环境的重视。
  • 原文链接：Bun joins Anthropic

Delayed Message Timing API 提案：提升多上下文 Web 应用性能

  • 面对多 iframe、Web Worker、多窗口等并行上下文带来的性能问题，微软和社区提出 Delayed Message Timing API，希望在浏览器层面更好地调度与测量延迟消息。
  • 此提案仍处于早期阶段，但为复杂 Web 应用在跨上下文通信和延迟诊断方面提供了新的思路。
  • 原文链接：Delayed Message Timing API 提案说明

🛠️ 工具与库

React Grab：面向 Agent 的 React 组件上下文抓取工具

  • 工具名称：React Grab
  • 功能描述：为编码智能体（如 AI 助手）提供 React 组件上下文抓取能力，使其能够理解组件层级、props/state 结构，从而在有上下文的前提下修改代码。

TanStack AI & TanStack Pacer：统一的 LLM 接口与节流/限流工具集

  • 工具名称：TanStack AI

  • 功能描述：提供统一、框架无关的接口，适配多家 LLM/AI 提供商，支持流式输出与基于 Zod 的模式推断，React 集成示例包含一个完整的聊天应用。

  • 工具名称：TanStack Pacer

  • 功能描述：框架无关的函数级“节奏控制”工具集，提供防抖、节流、限流、队列和批处理等能力，适用于手写 API 调用节流逻辑或与智能体集成。

Remend & Streamdown：更稳健的流式 Markdown 渲染

  • 工具名称：Remend
  • 功能描述：用于自动修复不完整的流式 Markdown，特别适用于处理 LLM 输出中被中断或截断的片段，避免前端渲染出错。

性能与调试相关工具

  • Browser Score：用于检测浏览器对 Web 平台特性的支持度，可按 CSS 属性、选择器、实验特性等维度过滤结果。原文链接
  • Telescope：跨浏览器 Web 性能测试代理，支持 Edge、Chrome、Safari、Firefox，可配置网络限速、视口大小并生成 HTML 报告。（原始仓库尚未稳定公开，可关注 Cloudflare 相关开源项目与文档）
  • Tinybench 6.0：跨运行时的微基准测试库，基于高精度计时 API，支持按次数或时长运行并输出统计数据。原文链接

Node.js 与数据相关工具

  • ts-exec：由 AdonisJS 作者推出的 TypeScript 执行工具，基于 SWC，在 Node 中直接运行 TS，支持 JSX 和装饰器（官方资料仍在完善，可关注作者后续发布）。
  • iceberg-js：面向 Apache Iceberg REST Catalog API 的 JavaScript 客户端（由 Supabase 发布，生态仍在演进，可关注 Supabase 官方博客与 GitHub）。

UI 组件与前端资源

  • SurveyJS：可在应用内渲染品牌化、可配置表单 UI 的库，支持从现有数据库填充字段以及导出 PDF，适合医疗表单、申请表等场景。原文链接
  • NativeWindUI：为 React Native 提供 30+ 可复用组件与界面流，基于 NativeWind 构建，主打原生风格与快速开发体验。原文链接
  • CanIUse Embed：用于在站点中嵌入 Can I Use 兼容性表格的工具（项目仍在演进，可参考 Ire Aderinokun 的 Can I Use Embed 文章与相关开源实现）。

📖 技术文章

性能优化与 Web 运行时

  • How Fast Can Browsers Process Base64 Data?：通过在多浏览器中基准测试 Base64 处理速度，发现现代浏览器中性能通常可达到 GB/s 等级，Firefox/Servo 目前相对较慢但有优化计划。原文链接
  • How We Made @platformatic/kafka 223% Faster：Platformatic 团队对 Kafka 客户端进行系统性基准测试与优化（包括 I/O、批量发送等），展示了如何挖掘 Node.js 服务端应用的性能瓶颈。原文链接
  • Comparing AWS Lambda Arm vs x86 Performance Across Runtimes：在多版本 Node.js 与不同架构（Arm/x86）下对 Lambda 进行对比测试，结果表明 Arm 在多数场景下具有明显吞吐与成本优势。原文链接
  • The Anatomy of a Web Performance Report：拆解性能报告的典型结构，解释各指标背后的含义及其对产品决策的启示（原文发表于 Web Performance Calendar，当前公开链接较难检索，可关注 calendar.perfplanet.com 2025 年专栏）。

JavaScript 与类型系统

  • The Nuances of JavaScript Typing Using JSDoc：面向“不想用 TypeScript，但又想要类型提示”的团队，系统介绍如何使用 JSDoc 在 JS 项目中获得类似 TS 的类型体验（原文发表于 thathtml.blog，当前公开链接受限，可参考 TypeScript 官方 JSDoc 文档）。
  • TypeScript Strictness is Non-Monotonic：分析 strictNullChecks 与 noImplicitAny 等严格选项之间的交互，指出“更严格”未必在所有维度上单调提高安全性，需要按项目策略组合配置。原文链接
  • Category Theory for JavaScript Developers：以 JavaScript/TypeScript 为载体讲解范畴论的基本概念，为理解函数式编程中的抽象提供直观切入点。原文链接

HTML/CSS 与可访问性

  • CSS Wrapped 2025：回顾 2025 年 Web 平台新增的 CSS 能力，如 CSS Carousel、自定义 select、scroll state 查询等，并配有一段较为轻松的视频概览。原文链接
  • Did You Know Your Browser Has Two Accessibility Trees?：从浏览器 DOM 树与无障碍树的关系入手，讲解辅助技术如何“看见”页面，可结合 MDN 的无障碍树文档与 Max Design 的相关演讲阅读。MDN 介绍、Max Design Talks
  • Accessible by Design: The Role of the lang Attribute：强调 HTML lang 属性在可访问性中的基础作用，指出其对屏幕阅读器语音选择、拼写检查等的影响。原文链接
  • NoLoJS: Reducing the JS Workload with HTML and CSS：鼓励在现代 HTML & CSS 能力增强的背景下，重新审视一些“理所当然”的 JS 实现模式，用更少的 JS 减轻性能和维护负担。原文链接

框架与工程实践

  • Building a Monorepo-Based Next.js App with Prisma：演示如何在 Monorepo 架构下统一前后端数据模型，结合 Next.js 与 Prisma 组织共享逻辑（可参考 Prisma 官方 Monorepo 指南）。参考文档
  • Next.js Image Optimization with the next/image Component：系统梳理 next/image 的最佳实践，涵盖懒加载、响应式图片和 CDN 配合等。官方文档
  • Some Do's and Don'ts of useEffectEvent：总结 React 新 API useEffectEvent 的使用建议与误用陷阱，帮助避免难以察觉的行为差异。参考文章
  • How We're Protecting Our Newsroom from npm Supply Chain Attacks：以媒体组织为例，展示如何用 pnpm 与严格的依赖管理策略降低供应链攻击风险。原文链接
  • No More Tokens: Locking Down npm Publishing Workflows：从个人与项目视角梳理 npm 发布链路，提出“去 token 化”的工作流设计思路。原文链接

🎄 12 月活动与资源

Advent of Code 2025

  • 著名的年度编程解谜活动，适合练习算法与数据结构，也常被用作团队/社区内部的编程打卡活动。
  • 原文链接：Advent of Code 2025

AdventJS：JavaScript 专题 Advent 挑战

  • 以 JavaScript/TypeScript/Python 题目为主的线上 Advent 挑战，可在浏览器中直接完成练习，适合前端和 Node.js 开发者日常刷题。
  • 原文链接：AdventJS

Advent of Svelte：Svelte 技巧每日一更

  • 面向 Svelte 社区的 Advent 活动，连续 24 天发布与 Svelte 相关的实践技巧与小知识点。
  • 原文链接：Advent of Svelte 2025

Cypress vs Playwright Advent 日历

🌐 生态系统动态

GitHub Spec Kit 与 Spec-Driven Development（SDD）实践

  • 文章分享了如何使用 GitHub 的 Spec Kit 构建现代 Svelte 应用，采用“规范驱动开发”的方式，让人类与 AI 协同围绕需求文档与规格共同演进代码。
  • 对希望系统性引入 AI 到日常开发流程的团队具有一定参考价值。
  • 原文链接：GitHub Spec Kit 官方文档

DebugBear 的 2025 Web 性能回顾

  • DebugBear 团队梳理了 2025 年与 Web 性能相关的重要话题，包括 DevTools 增强、TTFB/LCP/INP 指标统计方式变化以及 Firefox 对 Scheduler API 的支持情况。
  • 有助于理解“指标如何影响工具和框架设计”，为长期性能规划提供上下文。
  • 原文链接：2025 in Web Performance

VS Code Insiders Podcast 上线

  • 微软推出了 VS Code Insiders 播客节目，由 VS Code 团队成员从“发布说明之外”的角度探讨编辑器特性与生态发展。
  • 对重度 VS Code 用户和扩展开发者来说，这是了解产品方向与思路的一个新窗口。
  • 原文链接：VS Code Insiders Podcast 官网

Kagi Orion 浏览器 1.0 发布

  • 搜索引擎 Kagi 发布以 WebKit 为内核的 Orion 浏览器 1.0，区别于当前主流的 Chromium 阵营，为桌面浏览体验提供新的选择。
  • 原文链接：Orion 浏览器 1.0 发布介绍

核心要点：

  1. ⚠️ React Server Components 出现严重安全漏洞 React2Shell（CVE-2025-55182），涉及多框架与云厂商，需尽快排查升级。
  2. ⚠️ Node.js 计划在 12 月 15 日前后为多个版本分支发布高危安全修复，建议提前规划升级窗口与回归测试。
  3. 🔐 npm 发布与供应链安全成为焦点，GitHub 撤销旧版 token，多篇文章给出从个人到组织的安全加固实践。
  4. 🎉 JavaScript 迎来 30 周年、Let’s Encrypt 与 AV1 分别在 HTTPS 与视频编码领域取得里程碑式进展。
  5. 📦 构建与运行时生态持续演进：Vite 8 Beta、React Datepicker 9.0、Ant Design 6.x 及多款核心库完成重要更新。
  6. 🚀 TypeScript 7 将以 Go 重写编译器，带来显著性能提升；WebGPU 也在主流浏览器全面可用，为浏览器内高性能计算打开新空间。
  7. 🛠️ 新工具集中涌现：React Grab、TanStack AI/Pacer、Remend/Streamdown、Browser Score、Telescope 等帮助开发者和 AI 更好地理解与优化前端应用。
  8. 📖 多篇文章聚焦性能优化、类型系统与可访问性，为 JS/TS、React、Next.js 以及 Web 平台开发提供系统性实践参考。
  9. 🎄 Advent of Code、AdventJS、Advent of Svelte 与 Cypress vs Playwright Advent 日历，为 12 月提供了丰富的学习与练习资源。
  10. 🌐 工具链与生态层面，GitHub Spec Kit、DebugBear 性能年度回顾、VS Code Insiders Podcast 与 Orion 浏览器共同勾勒出 2025 年 Web 开发现状与趋势。

Vue3-全局组件 && 递归组件

✇掘金 前端
YaeZed

1.全局组件

全局组件是在 main.ts 中一次性注册，之后就可以在项目中的任何组件模板内直接使用，无需 import。

组件本身就是一个标准的 SFC (单文件组件)，使用 <script setup lang="ts"> 编写。

举个栗子，button组件

<template>
  <button class="base-button">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
// 这里可以定义 props, emits 等
// 例如:
// defineProps<{ type: 'primary' | 'secondary' }>()
</script>

<style scoped>
.base-button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.base-button:hover {
  background-color: #f0f0f0;
}
</style>

在创建 Vue 实例后、挂载 (.mount()) 之前来注册它。

app.component('组件名', 组件对象)

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 1. 导入要全局注册的组件
import BaseCard from './components/BaseCard.vue'
import BaseButton from './components/BaseButton.vue'
import SvgIcon from './components/SvgIcon.vue'

const app = createApp(App)

// 2. 使用 app.component() 进行全局注册
// app.component('组件名', 组件对象)
app.component('BaseCard', BaseCard)
app.component('BaseButton', BaseButton)
app.component('SvgIcon', SvgIcon)

// 3. 挂载应用
app.mount('#app')

注册后，在任何其他组件中都可以直接使用 <BaseButton>，无需导入。

<template>
  <div>
    <h1>欢迎!</h1>
    <BaseButton>点我</BaseButton>
    <BaseCard>
      <SvgIcon name="user" />
      <p>一些内容</p>
    </BaseCard>
  </div>
</template>

<script setup lang="ts">
// 无需 import BaseButton, BaseCard, SvgIcon
</script>
使用场景
  1. 基础 UI 组件： 这是最常见的场景。项目中使用频率极高的组件，例如 Button, Icon, Modal, Card, Input 等。通常会以 Base- 或 App- 作为前缀，以示区分。
  2. UI 库集成： 当使用像 Element Plus, Naive UI 或 Vuetify 这样的库时，它们通常会提供一个 app.use(Library) 的方式，这背后其实就是全局注册了它们所有的组件。
  3. 布局组件： AppHeader, AppFooter, Sidebar 等几乎每个页面都会用到的布局框架。

⚠️ 注意： 全局注册会轻微增加应用的初始加载体积，因为所有全局组件都会被打包到主 chunk 中。因此，请对那些真正常用的组件使用全局注册，避免滥用。

2.递归组件

递归组件是指在其模板中调用自身的组件。

举个栗子：树形菜单

首先，定义数据结构 ( types.ts)

// types.ts
export interface TreeNodeData {
  id: string;
  label: string;
  children?: TreeNodeData[]; // 关键：children 数组的类型是它自身
}

然后，创建递归组件 (TreeNode.vue)

<template>
  <div class="tree-node">
    <div class="node-label">{{ node.label }}</div>
    <!-- 可选链操作符?.：如果 node.children 存在且有值，则渲染子节点列表，否则返回undefined，隐式转换为false -->
    <ul v-if="node.children && node.children.length > 0" class="children-list">
      <li v-for="child in node.children" :key="child.id">
        <!-- 递归 -->
        <TreeNode :node="child" />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// 导入我们定义的类型
import type { TreeNodeData } from './types'

// 1. 定义 Props，接收父组件传递的数据
interface Props {
  node: TreeNodeData;
}
defineProps<Props>()

</script>

<style scoped>
.tree-node {
  margin-left: 20px;
}
.node-label {
  font-weight: bold;
}
.children-list {
  list-style-type: none;
  padding-left: 15px;
  border-left: 1px dashed #ccc;
}
</style>

在父组件中导入并渲染“根节点”即可。

<template>
  <div>
    <h1>文件结构树</h1>
    <TreeNode :node="fileTree" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TreeNode from './components/TreeNode.vue'
import type { TreeNodeData } from './components/types' // 确保路径正确

// 准备一个符合 TreeNodeData 结构的 TS 数据
const fileTree = ref<TreeNodeData>({
  id: 'root',
  label: '项目根目录 (src)',
  children: [
    {
      id: 'c1',
      label: 'components',
      children: [
        { id: 'c1-1', label: 'TreeNode.vue' },
        { id: 'c1-2', label: 'BaseButton.vue' },
      ],
    },
    {
      id: 'c2',
      label: 'views',
      children: [
        { id: 'c2-1', label: 'HomePage.vue' },
      ],
    },
    {
      id: 'c3',
      label: 'App.vue',
      // 这个节点没有 children，递归将在此处停止
    },
  ],
})
</script>
使用场景
  1. 树形结构： 任何需要展示层级关系的数据。例如：文件浏览器、组织架构图、导航菜单（尤其是多级下拉菜单）。
  2. 嵌套评论： 社交媒体或论坛中的评论区，一条评论可以有“回复”（子评论），子评论又可以有回复。
  3. JSON 格式化器： 展示一个 JSON 对象，如果某个值是对象或数组，就递归地调用组件来展示其内部。

参考文章

小满zs 学习Vue3 第十五章（全局组件，局部组件，递归组件）xiaoman.blog.csdn.net/article/det…

Vue3-父子组件通信

✇掘金 前端
YaeZed

在 Vue 3 中，尤其是在使用 `` 并结合 TypeScript 时，父子组件之间的通信变得非常清晰和类型安全。

核心思想是：

  1. 父组件向子组件 (Prop down): 通过 Props 传递数据。
  2. 子组件向父组件 (Event up): 通过 Events (自定义事件) 发送消息。

1.父传子

  • 定义一些本地数据 (响应式引用 ref)。

  • 将这些数据通过 props 传递给子组件。

  • 监听子组件发出的 emits 事件，并定义一个处理函数来更新本地数据。


  <div class="parent-container">
    <h2>👋 我是父组件</h2>
    
    更新给子组件的消息: 
    

    <p>
      从子组件收到的消息: <strong>{{ messageFromChild }}</strong>
    </p>

    <hr/>

    
  </div>



// 1. 导入 ref 用于创建响应式数据
import { ref } from 'vue';
// 2. 导入子组件
import ChildComponent from './ChildComponent.vue';

// 3. 定义父组件的本地状态
const messageForChild = ref('你好，子组件！这是来自父组件的消息。');
const messageFromChild = ref('...等待子组件的消息...'); // 存放从子组件收到的消息

// 4. 定义一个函数，用于处理子组件触发的 'updateMessage' 事件
// TypeScript 在这里可以根据子组件的 emit 定义自动推断 'newMessage' 的类型为 string
const handleChildMessage = (newMessage: string) => {
  messageFromChild.value = newMessage;
}



.parent-container {
  border: 2px solid #34495e;
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 8px;
}
input {
  margin-left: 10px;
}

2.子接收数据，传递数据给父组件


  <div class="child-container">
    <h3>👶 我是子组件</h3>
    
    <p>父组件传来的消息 (mainMessage):</p>
    <blockquote>{{ props.mainMessage }}</blockquote>
    
    <p>父组件传来的可选数字 (optionalCount):</p>
    <blockquote>{{ props.optionalCount || '未提供' }}</blockquote>

    
      向父组件发送消息
    
  </div>



// 1. 接收 Props (父 -> 子)
// 使用泛型参数为 props 定义类型。
// 这是最推荐的 TS 语法。
const props = defineProps<{
  mainMessage: string;      // 必需的 prop
  optionalCount?: number;   // 可选的 prop (注意 '?' 符号)
}>()

// 2. 定义 Emits (子 -> 父)
// 使用泛型参数为 emit 定义事件和载荷类型。
const emit = defineEmits<{
  // (e: '事件名', 载荷1: 类型, 载荷2: 类型, ...): void
  (e: 'updateMessage', message: string): void;
}>()

// 3. 定义一个函数来触发 emit
const sendMessageToParent = () => {
  const dataToSend = `你好父组件，我更新了！(时间戳: ${Date.now()})`;
  
  // 4. 触发事件，将数据 (dataToSend) 发送回父组件
  // Vue 会查找父组件上绑定的 @updateMessage 监听器
  emit('updateMessage', dataToSend);
}



.child-container {
  border: 2px dashed #42b983;
  background-color: #f0fff4;
  padding: 15px;
  margin-top: 15px;
  border-radius: 8px;
}
blockquote {
  margin: 0;
  padding: 10px;
  background: #fff;
  border-left: 5px solid #ccc;
}

3.关键点总结

  • defineProps (子组件用于接收)

    • 在 `` 中，它是一个宏，无需导入。
    • 使用泛型 defineProps<{...}>() 来提供最严格的类型检查。
    • props 是单向数据流。子组件不应该直接修改 props 对象中的值。

  • defineEmits (子组件用于发送)

    • 同样是一个宏，无需导入。
    • 使用泛型 defineEmits<{...}>() 来定义事件签名。
    • 语法 (e: 'eventName', payload: Type): void 确保了当你调用 emit('eventName', ...) 时，payload 必须匹配定义的 Type。

  • 模板中的绑定

    • 父组件使用冒号 : (即 v-bind) 来传递 props。
    • 父组件使用艾特 @ (即 v-on) 来监听 emits 事件。
❌