From 510dd3dfab0528deacff69ce4ad023caad360512 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Sun, 17 Sep 2023 22:02:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=92=E6=A7=BD=E5=AE=8C=E5=96=84=E5=A4=87?=
 =?UTF-8?q?=E6=B3=A8=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 36 +++++++-----------------------
 src/components/ChildComponentA.vue |  4 ++++
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ce2d602..4ebb3f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,17 @@
 <template>
   <ChildComponentA>
+    <!--  具名插槽的调用形式 <template v-slot:插槽名称>  -->
     <template v-slot:header>
       <P>提示</P>
     </template>
-    <template v-slot:default="slotProps">
-      <p>我的错误是<span>{{ slotProps.types['404'] }}</span></p>
+    <!--  带有参数的插槽引用  <template v-slot:插槽名称="参数代理"> 可以通过访问子组件数据-->
+    <template v-slot:default="slot_data_types">
+      <p>我的错误是<span>{{ slot_data_types.types['500'] }}</span></p>
     </template>
-    <template v-slot:footer="{types, sources}">
-      <div>错误来自：{{sources['page']}} - {{types['404']}}</div>
+    <!--  v-slot可以简写为#  -->
+    <!--  包含多个参数的传递时，可以使用对象格式, 按照子组件的传值顺序进行映射， 参数名需要与子组件一致  -->
+    <template #footer="{types, sources}">
+      <div>错误来自：{{ sources['page'] }} - {{ types['404'] }}</div>
     </template>
   </ChildComponentA>
 </template>
@@ -21,29 +25,5 @@ export default {
 </script>
 
 <style scoped>
-.wrap {
-  border: 1px solid #f66;
-  color: #f66;
-  padding: 10px;
-  position: relative;
-  max-width: 300px;
-}
-
-.header {
-  font-size: 20px;
-  color: #333;
-  font-weight: bold;
-}
 
-.close {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
-
-.footer {
-  color: #666;
-  font-size: 12px;
-  text-align: right;
-}
 </style>
diff --git a/src/components/ChildComponentA.vue b/src/components/ChildComponentA.vue
index a409c2d..9dd621c 100644
--- a/src/components/ChildComponentA.vue
+++ b/src/components/ChildComponentA.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="wrap">
     <div class="header">
+      <!--   具名插槽： 使用name定义了插槽的名称，在父组件中可以使用此名称调用插槽   -->
+      <!--   字符串"错误"是插槽的默认值,当没有传值时使用默认值   -->
       <slot name="header">错误</slot>
       <div class="close">关闭</div>
     </div>
     <div>
+      <!--   插槽中可以使用v-bind绑定参数，可以在父组件中使用此参数   -->
       <slot :types="types"></slot>
     </div>
     <div class="footer">
+      <!--   可以使用v-bind绑定多个参数，同时需要在父组件中以对象形式按照顺序进行映射   -->
       <slot name="footer" :types="types" :sources="sources"></slot>
     </div>
   </div>