vue2插槽 - 技术栈

插槽(Slots)详解与使用指南

1. 插槽概述

插槽(Slots)是Vue中一种强大的内容分发机制，允许组件作为模板的可重用包装器。它让父组件能够向子组件注入内容，使组件之间的组合更加灵活。Vue 2的插槽系统提供了多种方式来控制内容分发。

2. 插槽的基本使用

2.1 默认插槽

最简单的插槽用法是默认插槽，子组件中使用<slot>标签定义内容放置区域。

子组件 (ChildComponent.vue):

html 复制代码

<template>
  <div class="child-component">
    <h3>这是子组件的标题</h3>
    <slot><!-- 这里将插入父组件传入的内容 --></slot>
  </div>
</template>

父组件:

html 复制代码

<template>
  <div>
    <child-component>
      <p>这是插入到子组件插槽的内容</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

渲染结果:

html 复制代码

<div class="child-component">
  <h3>这是子组件的标题</h3>
  <p>这是插入到子组件插槽的内容</p>
</div>

2.2 插槽默认内容

插槽可以提供默认内容，当父组件没有提供内容时显示：

子组件:

html 复制代码

<template>
  <div>
    <slot>如果父组件没有提供内容，将显示这段默认文本</slot>
  </div>
</template>

3. 具名插槽

当需要多个插槽时，可以使用具名插槽，通过name属性为插槽命名。

3.1 定义具名插槽

子组件:

html 复制代码

<template>
  <div class="container">
    <header>
      <slot name="header">默认页头内容</slot>
    </header>
    
    <main>
      <slot>默认主内容</slot>
    </main>
    
    <footer>
      <slot name="footer">默认页脚内容</slot>
    </footer>
  </div>
</template>

3.2 使用具名插槽

父组件:

html 复制代码

<template>
  <layout-component>
    <template v-slot:header>
      <h1>这是自定义的页头内容</h1>
    </template>
    
    <p>这是默认插槽的内容</p>
    
    <template v-slot:footer>
      <p>这是自定义的页脚内容</p>
    </template>
  </layout-component>
</template>

简写语法(#)：

html 复制代码

<layout-component>
  <template #header>
    <h1>这是自定义的页头内容</h1>
  </template>
  
  <p>这是默认插槽的内容</p>
  
  <template #footer>
    <p>这是自定义的页脚内容</p>
  </template>
</layout-component>

4. 作用域插槽

作用域插槽允许子组件向父组件传递数据，父组件可以访问子组件中的数据来定制显示内容。

4.1 基本使用方法

子组件:

html 复制代码

<template>
  <div>
    <slot :user="user" :address="address">
      {{ user.firstName }}
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: '张',
        lastName: '三'
      },
      address: '北京市'
    }
  }
}
</script>

父组件:

html 复制代码

<template>
  <div>
    <user-profile>
      <template v-slot:default="slotProps">
        {{ slotProps.user.lastName }}{{ slotProps.user.firstName }} - {{ slotProps.address }}
      </template>
    </user-profile>
  </div>
</template>

4.2 解构插槽props

可以使用ES6解构语法获取特定属性：

html 复制代码

<user-profile>
  <template v-slot:default="{ user, address }">
    {{ user.lastName }}{{ user.firstName }} - {{ address }}
  </template>
</user-profile>

4.3 具名作用域插槽

具名插槽与作用域插槽可以结合使用：

子组件:

html 复制代码

<template>
  <div>
    <slot name="header" :title="title"></slot>
    <slot :content="content"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '这是标题',
      content: '这是内容'
    }
  }
}
</script>

父组件:

html 复制代码

<template>
  <my-component>
    <template #header="{ title }">
      <h1>{{ title }}</h1>
    </template>
    
    <template #default="{ content }">
      <p>{{ content }}</p>
    </template>
  </my-component>
</template>

5. 动态插槽名

Vue 2.6+支持动态插槽名，可以根据组件状态动态决定内容插入位置：

html 复制代码

<template>
  <base-layout>
    <template v-slot:[dynamicSlotName]>
      动态内容将插入到动态命名的插槽
    </template>
  </base-layout>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header' // 可以动态改变此值
    }
  }
}
</script>

6. 实际应用场景

6.1 创建可重用布局组件

html 复制代码

<!-- BaseLayout.vue -->
<template>
  <div class="layout">
    <header class="header">
      <slot name="header"></slot>
    </header>
    
    <main class="content">
      <slot></slot>
    </main>
    
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

6.2 自定义列表组件

html 复制代码

<!-- ItemList.vue -->
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: Array
  }
}
</script>

使用方式:

html 复制代码

<item-list :items="users">
  <template v-slot:default="{ item, index }">
    <div class="user-card">
      <span>{{ index + 1 }}. {{ item.name }}</span>
      <span>{{ item.email }}</span>
    </div>
  </template>
</item-list>

6.3 创建表格组件

html 复制代码

<!-- DataTable.vue -->
<template>
  <table>
    <thead>
      <tr>
        <slot name="columns"></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <slot name="row" :row="row" :index="index"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array
  }
}
</script>

使用方式:

html 复制代码

<data-table :data="products">
  <template #columns>
    <th>名称</th>
    <th>价格</th>
    <th>库存</th>
  </template>
  
  <template #row="{ row }">
    <td>{{ row.name }}</td>
    <td>{{ row.price }}</td>
    <td>{{ row.stock }}</td>
  </template>
</data-table>

7. 高级技巧

7.1 插槽默认值与条件渲染

html 复制代码

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">
        <h3 v-if="title">{{ title }}</h3>
        <h3 v-else>默认标题</h3>
      </slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

7.2 函数式组件中的插槽

javascript 复制代码

Vue.component('functional-component', {
  functional: true,
  render(h, context) {
    return h('div', [
      // 默认插槽
      context.slots().default,
      // 具名插槽
      context.slots().header
    ])
  }
})

8. 最佳实践与注意事项

明确作用域：记住父模板中的表达式只能访问父组件作用域；子模板中的表达式只能访问子组件作用域。
使用命名约定：为插槽使用一致的命名约定，提高代码可读性。
提供默认内容：尽可能为插槽提供默认内容，提升组件的易用性。
避免复杂逻辑：作用域插槽主要用于UI结构的定制，避免在其中放置过多业务逻辑。
v-slot指令只能用在<template>标签上（除了默认插槽的单独使用情况）。

9. 总结

Vue 2的插槽系统是组件化开发中的重要工具，通过灵活使用默认插槽、具名插槽和作用域插槽，可以显著提高组件的复用性和灵活性。掌握插槽机制，可以帮助开发者构建更加可定制化的组件库，减少代码重复，提高开发效率。