完成具名插槽的学习

20_脚手架/vue_code/22.插槽/2.src_具名插槽/App.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="container">
+    <Category title="美食">
+      <img slot="slot1" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
+      <a slot="slot2" href="https://www.baidu.com">获取更多信息</a>
+    </Category>
+    <Category title="游戏">
+      <ul slot="slot1">
+        <li v-for="(value, index) in games" :key="index">{{ value }}</li>
+      </ul>
+      <div slot="slot2" class="more">
+        <a href="https://www.baidu.com">单机游戏</a>
+        <a href="https://www.baidu.com">网络游戏</a>
+      </div>
+    </Category>
+    <Category title="电影">
+      <video slot="slot1" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
+      <template v-slot:slot2>
+        <div class="more">
+          <a href="https://www.baidu.com">经典</a>
+          <a href="https://www.baidu.com">热门</a>
+          <a href="https://www.baidu.com">推荐</a>
+        </div>
+        <h4>欢迎观看</h4>
+      </template>
+
+    </Category>
+  </div>
+</template>
+
+<script>
+import Category from "@/components/Category.vue";
+
+export default {
+  name: "App",
+  components: {Category},
+  data() {
+    return {
+      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
+      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
+      films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》']
+    }
+  }
+}
+</script>
+
+<style>
+.container, .more {
+  display: flex;
+  justify-content: space-around;
+}
+h4 {
+  text-align: center;
+}
+</style>

20_脚手架/vue_code/22.插槽/2.src_具名插槽/components/Category.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="category">
+    <h3>{{ title }}分类</h3>
+    <slot name="slot1">slot默认值1</slot>
+    <slot name="slot2">slot默认值2</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Category",
+  // props: ['title', 'listData']
+}
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    width: 200px;
+    height: 300px;
+  }
+  h3 {
+    text-align: center;
+    background-color: orange;
+  }
+  img {
+    width: 100%
+  }
+  video {
+    width: 100%;
+  }
+</style>

20_脚手架/vue_code/22.插槽/2.src_具名插槽/main.js

@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入插件
+import vueResource from "vue-resource";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(vueResource)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/src/App.vue

@@ -1,15 +1,29 @@
 <template>
   <div class="container">
     <Category title="美食">
-      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
+      <img slot="slot1" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
+      <a slot="slot2" href="https://www.baidu.com">获取更多信息</a>
     </Category>
     <Category title="游戏">
-      <ul>
+      <ul slot="slot1">
         <li v-for="(value, index) in games" :key="index">{{ value }}</li>
       </ul>
+      <div slot="slot2" class="more">
+        <a href="https://www.baidu.com">单机游戏</a>
+        <a href="https://www.baidu.com">网络游戏</a>
+      </div>
     </Category>
     <Category title="电影">
-      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
+      <video slot="slot1" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
+      <template v-slot:slot2>
+        <div class="more">
+          <a href="https://www.baidu.com">经典</a>
+          <a href="https://www.baidu.com">热门</a>
+          <a href="https://www.baidu.com">推荐</a>
+        </div>
+        <h4>欢迎观看</h4>
+      </template>
+
     </Category>
   </div>
 </template>
@@ -31,8 +45,11 @@ export default {
 </script>
 
 <style>
-.container {
+.container, .more {
   display: flex;
   justify-content: space-around;
 }
+h4 {
+  text-align: center;
+}
 </style>

20_脚手架/vue_code/src/components/Category.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="category">
     <h3>{{ title }}分类</h3>
-    <slot>slot默认值</slot>
+    <slot name="slot1">slot默认值1</slot>
+    <slot name="slot2">slot默认值2</slot>
   </div>
 </template>