Vue中插槽（slot）使用和理解

最近被新来的同事问起vue的插槽（slot）的问题，想了一下，感觉平时开发中slot使用频率并不是很高。所以结合了一个实例代码，整理了下插槽（slot）的用法。

Vue官网文档上是这么描述的：

将 slot 元素作为承载分发内容的出口。

在我个人理解：slot既然叫插槽，可以理解为占位内嵌的地方，具体到代码中就是组件内可以添加内容的一个空间。

1. 匿名插槽

//  组件（父）
  <Card>
    <p>hello,world</p>
  </Card>

//  组件内部（子）
  <div class="cardItem">
    <h1>子页面</h1>
    <slot></slot>  // 注意：此处替换为了 <p>hello,world!</p>
  </div>

渲染结果：

2. 具名插槽

带name属性具体名字的插槽，假如需要在组件内部预留多个插槽位置，就需要为插槽定义名字，指定插入的位置。

// 子页面
  <div class="cardItem">
    <h1>子页面</h1>
    
    <!-- 具名插槽 name需与要插入的地方v-slot：name对应 -->
    <slot name="header"></slot>
    
    <!-- name不写默认为default 会带出剩余其他的内容 -->
    <slot></slot>
    
    <slot name="footer"></slot>
  </div>
  
  
// 父页面
 <Card :myName="myName">
 
 	  <!-- 具名插槽的内容必须使用模板<template></template>包裹 -->
      <template v-slot:header>
        <p>头部</p>
      </template>
      
      <!-- v-slot: 可以缩写成（#）语法糖 -->
      <template #footer>
        <p>脚步</p>
      </template>

      <p>身体</p>
      
</Card>

渲染结果：

3. 插槽传值

父传子 ：与父子组件传值一样，不细说举例了

子传父：

// 子页面
<template>
  <div class="cardItem">
  	<h1>子页面</h1>
    <slot name="content" :cardList="cardList"></slot>
  </div>
</template>
export default {
  data() {
    return {
      cardList: [
        {
          content: "我是子页面传递的数据1",
          id: 1
        },
        {
          content: "我是子页面传递的数据2",
          id: 2
        },
        {
          content: "我是子页面传递的数据3",
          id: 3
        }
      ]
    };
  }
};

// 父页面
<Card>
   <!-- 此处为es6 {}解构，{cardList}等同于ctx.cardList, ctx(作用域上下文对象) -->
   <template #content="{cardList}">
     <ul>
       <li v-for="item in cardList" :key="item.id">
          {{ item.content }}
       </li>
     </ul>
   </template>
</Card>

渲染结果：