From d926ed1924fb3025b8a45a77fdcc626320cd7a4a Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Sat, 5 Aug 2023 09:12:54 +0800
Subject: [PATCH] i18n(zh-cn): Update `core-concepts/astro-components.mdx`
 since #4045

---
 .../zh-cn/core-concepts/astro-components.mdx  | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
diff --git a/src/content/docs/zh-cn/core-concepts/astro-components.mdx b/src/content/docs/zh-cn/core-concepts/astro-components.mdx
index 3f3ca288f7617..b19d373777f7e 100644
--- a/src/content/docs/zh-cn/core-concepts/astro-components.mdx
+++ b/src/content/docs/zh-cn/core-concepts/astro-components.mdx
@@ -274,6 +274,59 @@ const { title } = Astro.props
 </div>
 ```
 
+### 传递插槽
+
+插槽可以传递给其他组件。例如，在创建嵌套布局时：
+
+```astro {11,14}
+// src/layouts/BaseLayout.astro
+---
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+    <slot name="head"/>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+```
+
+```astro {7, 8}
+// src/layouts/HomeLayout.astro
+---
+import BaseLayout from "./BaseLayout.astro";
+---
+
+<BaseLayout>
+  <slot name="head" slot="head"/>
+  <slot />
+</BaseLayout>
+```
+
+:::note
+通过在 `<slot />` 标记上使用 `name` 和 `slot` 属性，可以将具名插槽传递给另一个组件。
+:::
+
+现在，传递给 `HomeLayout` 的默认插槽和 `head` 插槽也将会传递给父级的 `BaseLayout` 组件。
+
+```astro
+// src/pages/index.astro
+---
+import HomeLayout from "../layouts/HomeLayout.astro";
+---
+
+<HomeLayout>
+	<title slot="head">Astro</title>
+	<h1>Astro</h1>
+</HomeLayout>
+```
+
 ## HTML 组件
 
 Astro 支持导入和使用 `.html` 文件作为组件，或者将这些文件放在 `src/pages` 子目录下作为页面。如果你正在复用一个没有使用框架的现有网站代码，或者你想确保你的组件没有动态功能，你可能会需要使用 HTML 组件。
