Vue2 插槽 （默认插槽，具名插槽，作用域插槽）

插槽 (slot)

1. 作用：让父组件可以往子组件指定位置插入 html 结构，也是组件的一种通信方式。
2. 分类: 默认插槽，具名插槽，作用域插槽。

默认插槽

父组件（此时 Count 是一个组件）:
     <Count>     
           <div> html 结构</div>
     </Count>

子组件：
     <template>
            <div>
               <slot></slot>
            </div>  
    </template>
    // 渲染结果为 ：html 结构

具名插槽 （给插槽取个名字，方便准确找到该渲染的位置）

注意 v-slot：简写为 # 且 具名插槽需要用 template 包裹（组件不用 template 包裹）

父组件：
 <Active>
      <template #Header>
        <p>满江红</p>
      </template>
      
      </template>
      <template #Foot>
        <p>忽然看不见</p>
      </template>
  </Active>

子组件：
<template>
  <div>
    <div>
      <slot name="Header">若父组件中 #Header 无内容，则渲染默认值，而默认值就是在这个地方填写</slot>
    </div>

    <div>
      <slot name="Foot">默认值....</slot>
    </div>
  </div>
</template>

作用域插槽

可用 解构赋值 具体如下

父组件：
<Active>
      <template #Header="obj">
        <p>满江红 ---- {{obj.user}}</p>
      </template>
      <template #content="{ msg, user }">
        <div>
          <p>红漫天</p>
          <p>{{ msg.name }}</p>
          <p>{{ user }}</p>
          <p>{{ msg.age }}</p>
          <p>{{ msg.gender }}</p>
        </div>
      </template>
      <template #Foot>
        <p>忽然看不见</p>
      </template>
    </Active>

子组件：
<template>
  <div class="active-container">
    <div class="Header">
      <slot name="Header" user="hello Vue.js"></slot>
    </div>

    <div class="content">
      <slot name="content" :msg="list" user="hello Vue.js"></slot>
    </div>

    <div class="Foot">
      <slot name="Foot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list:{
        name:"zdd",
        age:18,
        gender: "男"
      }
    }
  },
};
</script>

此项结果为：