vue插槽（slot）详解

什么是插槽？插槽（Slots）是一种让父组件向子组件传递内容的方式，使得组件具有更高的可扩展性和灵活性。

插槽的优势

1. 提高组件的可复用性：通过插槽，一个组件可以在不同的场景下接收不同的内容，从而提高了组件的通用性和可复用性。
2. 更好的代码组织：将组件的结构和内容分离，使得代码更加清晰、易于维护。
3. 增强的灵活性：父组件可以根据具体需求灵活地定制子组件的内容，而不需要修改子组件的内部实现。

一、默认插槽

• 当子组件的模板中定义了一个<slot>标签时，这就是一个默认插槽，插槽内可以传入默认内容。

• 父组件在使用子组件时，可以在子组件的标签内部插入内容，这些内容会被渲染到子组件的默认插槽位置。

代码示例：

子组件

     <!-- 子组件 -->
     <template>
       <div>
         <h1>这是子组件</h1>
         <slot>如果父组件没有传入内容，这里显示默认内容</slot>
       </div>
     </template>

父组件

     <!-- 父组件 -->
     <template>
       <div>
         <my-component>这是父组件传入的内容</my-component>
       </div>
     </template>

二、具名插槽 

• 当子组件需要多个插槽来接收不同的内容时，可以使用具名插槽。

• 在子组件的<slot>标签上添加name属性来命名插槽，父组件在使用子组件时，通过<template>标签并使用v-slot:指令（在 Vue 2.6 及以上版本中可以使用#缩写形式）来指定要插入到哪个具名插槽的内容。

代码示例： 

子组件

     <!-- 子组件 -->
     <template>
       <div>
         <header>
           <slot name="header"></slot>
         </header>
         <main>
           <slot></slot>
         </main>
         <footer>
           <slot name="footer"></slot>
         </footer>
       </div>
     </template>

父组件

     <!-- 父组件 -->
     <template>
       <div>
         <my-component>
           <template v-slot:header>
             <h1>这是头部内容</h1>
           </template>
           <p>这是默认插槽的内容</p>
           <template #footer>
             <p>这是底部内容</p>
           </template>
         </my-component>
       </div>
     </template>

三、作用域插槽 

• 作用域插槽允许子组件向父组件传递数据，父组件可以根据这些数据来决定插槽中要渲染的内容。

• 在子组件中，使用带数据的<slot>标签定义作用域插槽，并通过attribute的方式将数据传递出去。父组件在使用子组件时，可以通过v-slot指令接收这些数据，并在插槽内容中使用。

代码示例：

子组件 

     <!-- 子组件 -->
     <template>
       <div>
         <slot :data="items">默认内容</slot>
       </div>
     </template>
     <script>
     export default {
       data() {
         return {
           items: [1, 2, 3],
         };
       },
     };
     </script>

父组件 

     <!-- 父组件 -->
     <template>
       <div>
         <my-component>
           <template v-slot="{ data }">
             <ul>
               <li v-for="item in data" :key="item">{{ item }}</li>
             </ul>
           </template>
         </my-component>
       </div>
     </template>