插槽(默认插槽、具名插槽、作用域插槽)

默认插槽

1.作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件 2.分类：默认插槽、具名插槽、作用域插槽 3.使用方式
（1）默认插槽
父组件
<Category>
<div></div>
</Category>
子组件
<template>
<div >
<slot>我是一些默认值，当使用者没有传递具体结构时我会出现</slot>
</div>
</template>

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img src="https:/s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
    </Category>
      <Category title="游戏">
      <ul>
        <li v-for="(gameItem,index) in games" :key="index">{{gameItem}}</li>
      </ul>
    </Category>
      <Category title="电影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
// 引入组件
import Category from './components/Category'

export default {
  name: 'App',
  components: { Category },
  data(){
    return{
      foods:['火锅','烧烤','小龙虾'],
      games:['穿越火线','红色警戒','超级玛丽'],
      films:['教父','拆弹专家','你好，李焕英']
    }
  }
}
</script>

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

Category.vue

<template>
  <div class="category">
   <h3>{{title}}</h3>
   <!-- 定义一个插槽，等着组件使用者进行填充 -->
   <slot>我是一些默认值，当使用者没有传递具体结构时我会出现</slot>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props:['title']
}
</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>

具名插槽

父组件

<Category title="美食">
<template slot="center">

  <div>结构1</div>
  </template>
   <template slot="footer">
  <div>结构2</div>
  </template>
    </Category>

子组件

<template>
  <div class="category">
   <!-- 定义一个插槽，等着组件使用者进行填充 -->
   <slot name="center">我是一些默认值</slot>
   <slot name="footer"></slot>
  </div>
</template>

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img slot="center" src="https:/s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
      <a slot="footer" href="https://www.baidu.com/">更多美食</a>
    </Category>
      <Category title="游戏">
      <ul slot="center">
        <li v-for="(gameItem,index) in games" :key="index">{{gameItem}}</li>
      </ul>
      <div slot="footer" class="foot">
        <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>
      <template v-slot:footer>
         <div slot="footer" class="foot">
            <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'

export default {
  name: 'App',
  components: { Category },
  data(){
    return{
      foods:['火锅','烧烤','小龙虾'],
      games:['穿越火线','红色警戒','超级玛丽'],
      films:['教父','拆弹专家','你好，李焕英']
    }
  }
}
</script>

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

Category.vue

<template>
  <div class="category">
   <h3>{{title}}</h3>
   <!-- 定义一个插槽，等着组件使用者进行填充 -->
   <slot name="center">我是一些默认值，当使用者没有传递具体结构时我会出现1</slot>
   <slot name="footer">我是一些默认值，当使用者没有传递具体结构时我会出现2</slot>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props:['title']
}
</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>

作用域插槽

（1）理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games 数据在 category 组件中，但使用数据所遍历出来的结构由 APP 组件决定）
（2）具体编码
父组件
<Category>
<template scope="scopeData">
<ul>
<li v-for="(gameItem, index) in scopeData.games" :key="index"> {{ gameItem }} </li>
</ul>
</template>
</Category>

子组件
<template>
<div class="category">
<h3>{{ title }}</h3>

<slot :scopeData="games">我是一些默认值</slot>
</div>
</template>

App.vue

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

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

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

<script>
// 引入组件
import Category from './components/Category'

export default {
  name: 'App',
  components: { Category },
}
</script>

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

Category.vue

<template>
  <div class="category">
    <h3>{{ title }}</h3>
    <!-- 定义一个插槽，等着组件使用者进行填充 -->
    <slot :games="games"
      >我是一些默认值，当使用者没有传递具体结构时我会出现1</slot
    >
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: ['title'],
  data() {
    return {
      games: ['穿越火线', '红色警戒', '超级玛丽'],
    }
  },
}
</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>