完成插槽的学习

demo/component-slot/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <ChildComponentA>
+    <!--  具名插槽的调用形式 <template v-slot:插槽名称>  -->
+    <template v-slot:header>
+      <P>提示</P>
+    </template>
+    <!--  带有参数的插槽引用  <template v-slot:插槽名称="参数代理"> 可以通过访问子组件数据-->
+    <template v-slot:default="slot_data_types">
+      <p>我的错误是<span>{{ slot_data_types.types['500'] }}</span></p>
+    </template>
+    <!--  v-slot可以简写为#  -->
+    <!--  包含多个参数的传递时，可以使用对象格式, 按照子组件的传值顺序进行映射， 参数名需要与子组件一致  -->
+    <template #footer="{types, sources}">
+      <div>错误来自：{{ sources['page'] }} - {{ types['404'] }}</div>
+    </template>
+  </ChildComponentA>
+</template>
+
+<script>
+import ChildComponentA from "@/components/ChildComponentA.vue";
+
+export default {
+  components: {ChildComponentA},
+}
+</script>
+
+<style scoped>
+
+</style>

demo/component-slot/components/ChildComponentA.vue

@@ -0,0 +1,64 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      types: {
+        404: 'Page Not Found',
+        500: 'System Error',
+      },
+      sources: {
+        system: '系统',
+        page: '页面',
+        console: '控制台',
+      }
+    }
+  }
+}
+</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/App.vue

@@ -2,7 +2,8 @@
   <ChildComponentA>
     <!--  具名插槽的调用形式 <template v-slot:插槽名称>  -->
     <template v-slot:header>
-      <P>提示</P>
+      <!--   主函数设置动态数据   -->
+      <P>{{ tips }}</P>
     </template>
     <!--  带有参数的插槽引用  <template v-slot:插槽名称="参数代理"> 可以通过访问子组件数据-->
     <template v-slot:default="slot_data_types">
@@ -21,6 +22,11 @@ import ChildComponentA from "@/components/ChildComponentA.vue";
 
 export default {
   components: {ChildComponentA},
+  data() {
+    return {
+      tips: "提示",
+    }
+  }
 }
 </script>