具名插槽

使用方法

1.编写使用的组件模板,模板中的插槽添加name属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div id="Category">
    <h3>{{ title }}分类</h3>
    <slot name="center">1. 我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    <slot name="footer">2. 我是具名插槽</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props:['listData','title','img','video']
};
</script>

<style scoped>
#Category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3 {
  background-color: orange;
}
img {
  width: 150px;
  height: 100px;
}
video {
  width: 100%;
}
</style>

2.在APP.vue中使用该模板并传递数据,并制定有名字的插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
  <div id="app">
    <Category :listData="foods" title="美食">
      <!-- <ul>
        <li v-for="(food, index) in foods" :key="index">{{ food }}</li>
      </ul> -->
      <img
        src="https://img95.699pic.com/photo/50099/7021.jpg_wh860.jpg"
        slot="center"
      />
        <!-- slot属性：填坑的时候告诉Vue要给哪个坑【插槽】填东西，Vue会将slot属性所在的元素放到坑里 -->
      <a href="#" slot="footer">更多美食</a>
    </Category>
    <Category :listData="games" title="游戏">
      <ul slot="center">
        <li v-for="(game, index) in games" :key="index">{{ game }}</li>
      </ul>
      <!-- 1. 注意：空格分隔处依旧能点击跳转，非合适代码(看效果图) -->
      <!-- 往同一个坑里填多个东西，只会追加，不会覆盖 -->
	  <!-- 往同一个坑里填多个东西时，如果每个东西分开写，slot属性要写多次 -->
      <a href="#" slot="footer">单机游戏 </a>
      <a href="#" slot="footer">网络游戏</a>
    </Category>
    <Category :listData="films" title="电影">
      <!-- <ul>
        <li v-for="(film, index) in films" :key="index">{{ film }}</li>
      </ul> -->
      <video
        src="http://vjs.zencdn.net/v/oceans.mp4"
        controls
        slot="center"
      ></video>
      <!-- 2. 解决a标签跳转 使用div容器+类选择器 -->
      <!-- <div slot="footer" class="footer">
        <a href="#">经典</a>
        <a href="#">热门</a>
        <a href="#">推荐</a>
      </div>
      <h4 slot="footer">欢迎前来观影</h4> -->

      <!-- 3. 包裹多层div 换成不影响结构的template【不生成真实的DOM元素】 -->
      <!-- <template slot="footer"> -->
      <!-- 4. 具名插槽的新写法【只能用在template标签上，div上报错】【Vue2.6+ 才支持】 -->
      <template v-slot:footer>
        <template class="footer">
          <a href="#">经典</a>
          <a href="#">热门</a>
          <a href="#">推荐</a>
        </template>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
    };
  },
  components: {
    Category,
  },
};
</script>

<style scoped>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  display: flex;
  justify-content: space-around;
}
.footer {
  display: flex;
  justify-content: space-around;
}
</style>