Vue：（三十三）插槽

今天来学习一个新的组件间通信的方式：插槽，它适用于父组件===>子组建

插槽一共分为三类：默认插槽、具名插槽、作用域插槽

1. 默认插槽：

### Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'Category',
    props: ['title'],
  }
</script>

<style>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3 {
    text-align: center;
    background-color: orange;
  }
</style>

### App.vue

<template>
  <div class="company">
    <Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
    </Category>
    <Category title="游戏">
      <ul>
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video controls
             src="https://baike.baidu.com/item/%E5%9C%A8%E7%BA%BF%E7%94%B5%E5%BD%B1/5218404?fr=aladdin"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name: 'App',
    components: { Category },
    data() {
      return {
        foods: ['火锅', '烧烤', '牛排', '小龙虾'],
        games: ['地下城与勇士', '英雄联盟', '穿越火线', '劲舞团'],
        films: ['《阿凡达》', '《第一滴血》', '《龙虎门》', '《导火线》'],
      }
    },
  }
</script>

<style>
  .company {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
</style>

2. 具名插槽：

### Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot name="center">没有信息就显示默认吧</slot>
    <slot name="footer">没有信息就显示默认吧</slot>
  </div>
</template>

<script>
  export default {
    name: 'Category',
    props: ['title'],
  }
</script>

<style>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3 {
    text-align: center;
    background-color: orange;
  }
</style>

### App.vue

<template>
  <div class="company">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
      <a slot="footer" href="www.badu.com">百度一下</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video slot="center" controls
             src="https://baike.baidu.com/item/%E5%9C%A8%E7%BA%BF%E7%94%B5%E5%BD%B1/5218404?fr=aladdin"></video>
      <template v-slot:footer>
        <div class="foot">
          <a href="www.badu.com">经典</a>
          <a href="www.badu.com">热门</a>
          <a href="www.badu.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>
  .company,
  .foot {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  h4 {
    text-align: center;
  }
</style>

3. 作用域插槽：

### Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :games="games">没有信息就显示默认吧</slot>
  </div>
</template>

<script>
  export default {
    name: 'Category',
    props: ['title'],
    data() {
      return {
        games: ['地下城与勇士', '英雄联盟', '穿越火线', '劲舞团'],
      }
    },
  }
</script>

<style>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3 {
    text-align: center;
    background-color: orange;
  }
</style>

### App.vue

<template>
  <div class="company">
    <Category title="游戏">
      <template scope="data">
        <ul>
          <li v-for="(item,index) in data.games" :key="index">{{item}}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template scope="{games}">
        <ol>
          <li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope={games}>
        <h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name: 'App',
    components: { Category },
  }
</script>

<style>
  .company,
  .foot {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  h4 {
    text-align: center;
  }
</style>

插槽的学习只有纯纯的撸代码，理论知识不多

我是空谷有来人，谢谢支持！