Vue学习---插槽篇

1. 初步了解插槽

什么是插槽？

插槽就是子组件提供给父组件使用的一个占位符，可以通俗理解为“占坑作用”。有了该占位符，父组件可以在该占位符中填充任何模板，不仅限于传递数据，也可以填充如HTML、组件、template模板、标签等。填充后，内容替换子组件的标签

为什么要使用插槽？
在组件通信中（详情见文章:Vue组件学习、组件通信），我们了解到组件之间如何传递数据。那父组件在复用子组件的时候除了想给子组件传递数据，还想更改子组件的内容和样式时，怎么办呢？
一般来说，父组件是没办法更改子组件的内容和样式的，总结就是“你可以用我但是不可以更改我”。
就像买车一样 不能自己去决定车的配置、外观、性能、尺寸，这些都是厂家自己设计好然后批量生产的 ，大家买下都是一样的。

如果你真的想更改子组件，那就使用插槽。
插槽的作用就是使得父组件可以改造子组件，让父组件提供内容，在子组件中展示

使用场景：

• 使用插槽让用户拓展组件，更好地复用组件和对其做定制化处理。
• 当一个子组件被父组件复用时，或许在不同情况下需要被更改，此时如果去重写组件是 一件不明智的事情，此时通过slot插槽向子组件内部指定位置传递内容，是一个更好的选择。
• 在布局组件、表格列、下拉框、弹框显示内容中常用。

插槽的作用：
让父组件向子组件指定位置插入html结构，也是一种组件间的通信方式。

2. 插槽的分类

2.1 默认插槽

案例场景：以下是一个组件的复用（一个蓝色的div即是一个组件），该组件在页面中复用了3次，我想对某一个组件实现私人定制，比如，美食组件我只想放一张图片，电影组件中我想放一个视频，如何做？

由上方效果变成下面这样的：

制定子组件Category.vue：
这是没有使用插槽的情况，组件不能实现定制化：

<template>
  <div class="category">
    <h3>{
  {title}}</h3>    
    <ul>
      <li v-for="(item,index) in listData" :key="index">{
  {item}}</li>
    </ul>
  </div>
</template>
<script>
  export default{
     
    name:"Category",
    // 接收父组件传过来的值
    props:['listData','title']
  }
</script>
<style>
  .category{
     
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3{
     
    text-align: center;
    background-color: orange;
  }
</style>

在App.vue中使用Category.vue：

<template>
  <div id="app">
    <!-- 复用子组件 静态传输标题，动态传输数组-->
   <Category title="美食" :listData="foods" />
   <Category title="书籍" :listData="books"/>
   <Category title="电影" :listData="films"/>
  </div>
</template>

<script scope="this api replaced by slot-scope in 2.5.0+">
import Category from './components/Category.vue';
export default {
   
  name: 'App',
  components: {
   
    Category,
  },
  data(){
   
    return{
   
      // 定义数据
      foods:['火锅','重庆火锅','小龙虾','牛排'],
      books:['语文','数学','英语','化学'],
      films:['重庆森林','七龙珠','犬夜叉','心灵捕手'],
    }
  }
}
</script>

<style>
#app {
   
  display: flex;
  justify-content: