Vue.js 技术教程：插槽（Slot）的使用与高级技巧

引言

插槽（Slot）是 Vue.js 中一个非常重要的特性，它允许开发者定义组件的布局和样式，同时允许使用该组件的父级组件传入自定义的内容。本文将详细讲解插槽的基础用法以及高级技巧。

基础用法

在 Vue.js 中，插槽分为默认插槽和具名插槽。

默认插槽

默认插槽是最简单的插槽类型，它不需要命名，直接将内容传递给子组件即可。

<template>
  <div class="my-component">
    <slot></slot> 
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>
            

<template>
  <div>
    <MyComponent>
      这是传递给默认插槽的内容
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'
export default {
  components: {
    MyComponent
  }
}
</script>
            

具名插槽

具名插槽允许你在子组件中定义多个插槽，每个插槽都有一个独特的名字。父组件可以通过 “ 标签的 `slot` 属性指定要填充的插槽。

<template>
  <div class="my-component">
    <slot name="header"></slot> 
    <slot></slot> 
    <slot name="footer"></slot> 
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>
            

<template>
  <div>
    <MyComponent>
      <template slot="header">
        这是传递给 header 具名插槽的内容
      </template>
      这是传递给默认插槽的内容
      <template slot="footer">
        这是传递给 footer 具名插槽的内容
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'
export default {
  components: {
    MyComponent
  }
}
</script>
            

高级技巧

插槽作用域

插槽作用域允许子组件传递数据给插槽内容。这在构建可重用的组件时非常有用。

<template>
  <div class="my-component">
    <slot :user="currentUser"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      currentUser: {
        name: '张三',
        age: 30
      }
    }
  }
}
</script>
            

<template>
  <div>
    <MyComponent v-slot:default="slotProps">
      {{ slotProps.user.name }} 已经 {{ slotProps.user.age }} 岁了。
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'
export default {
  components: {
    MyComponent
  }
}
</script>
            

总结

插槽是 Vue.js 中一个非常灵活和强大的特性，通过合理使用插槽，可以极大地提升组件的可复用性和可维护性。希望本文能够帮助你深入理解插槽的使用与技巧。