vue的slot插槽如何使用和理解？

slot插槽：分为三种类型：匿名插槽、具名插槽、作用域插槽；
简单来说，就是在子组件内放一个slot标签，作为占位符；
具体展示什么，是父组件决定的，下面举三个小例子；

1、匿名插槽

子组件代码如下：

<template>
  <div>
    <header>公用头部</header>
    <section>公用主体部分</section>
    <slot></slot>
    <!--此为匿名插槽，因为没有名字：
    尾部footer不是每个父组件都需要，所以我们通过slot编写
    占位符，需要父组件分发插入内容，不分发就默认不展示-->
  </div>
</template>
<script>
export default {
  name: "childA",
  data() {
    return {};
  },
};
</script>

父组件代码如下：

<template>
  <div>
    <childA>
      <!-- 下方div内的内容会把子组件slot里的内容替换掉，
      如果没有下方div，则默认展示slot里的内容，若slot也没有内容，则展示为空 -->
      <template>
        <div>我是footer</div>
      </template>
    </childA>
  </div>
</template>
<script>
export default {
  name: "parent",
};
</script>
<style lang="">
</style>

2、具名插槽

有些时候，当我们的子组件中有2个模块不确定是否展示，你会想，放两个slot不就行了吗？
放完之后你会发现，两个slot展示的内容一样，怎么办呢？这个时候就可以使用具名插槽；
其实就是给每个插槽起个名字，分发内容时可以一 一对应；

父组件代码如下：

<template>
  <div>
    <childA>
      <template v-slot:headers>
        <!-- headers和slot中name对应的话，就会把下方内容填充进去 -->
        <div class="headers">
          我是公共头部
        </div>
      </template>
      <template v-slot:footers>
        <div class="footers">
          我是公共尾部
        </div>
      </template>
    </childA>
  </div>
</template>
<script>
export default {
  name: "parent",
};
</script>
<style lang="">
</style>

子组件代码如下：

<template>
  <div>
    <slot name="headers"></slot>
    <section>公用主体部分</section>
    <slot name="footers"></slot>
  </div>
</template>
<script>
export default {
  name: "childA",
  data() {
    return {};
  },
};
</script>

3、作用域插槽

样式由父组件决定，内容和数据由子组件决定
例如日历组件需要自定义，这个时候就可以使用作用域插槽；在父组件中通过判断数据中的标识，来给某些日期自定义加标记，如下图所示

---

下面我举一个其他的小例子演示下作用域插槽的用法

子组件代码如下：

<template>
  <div>
    <div v-for="(item,i) in arr" :key="i">
      <slot :item="item"></slot>
    </div>

  </div>
</template>
<script>
export default {
  name: "childA",
  data() {
    return {
      arr: [
        {
          flag: true,
          name: "张三",
          age: "12",
        },
        {
          name: "李四",
          age: "17",
        },
        {
          name: "王五",
          age: "20",
        },
      ],
    };
  },
};
</script>

父组件代码如下：

<template>
  <div>
    <childA>
      <template v-slot="obj">
        <!-- obj随便定义，obj.item就是子组件插槽上绑定的item值 -->
        <div>
          <span v-if="obj.item.flag" style="color:red">标记</span>
          <!-- 
            此处可以根据子组件数据中的flag标识，自定义添加标记字样
            实现父组件根据子组件的数据进行个性化展示
            此处如果使用具名插槽，估计得累死，因为每个父组件都要获取一遍数据
           -->
          {{obj.item.name}}
        </div>
      </template>
    </childA>
  </div>
</template>
<script>
export default {
  name: "parent",
};
</script>
<style lang="">
</style>