插槽完善备注信息

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>

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>