vue插槽（slot）详细解读

在 Vue.js 中，slot（插槽）是一个强大的功能，它允许你创建可复用的组件，同时允许父组件为子组件的某些部分提供自定义的 HTML 结构。通过插槽，你可以定义组件的模板结构，并在使用时由父组件来决定具体的内容。

基础插槽

在 Vue 组件中，你可以使用 <slot> 标签来定义插槽。如果父组件没有为这个插槽提供内容，那么 <slot> 标签内可以有一些默认内容。

子组件（ChildComponent.vue）:

<template>
  <div>
    <h2>我是子组件</h2>
    <slot>如果没有提供插槽内容，这里会显示。</slot>
  </div>
</template>

父组件:

<template>
  <div>
    <ChildComponent>
      <p>这是父组件提供的插槽内容。</p>
    </ChildComponent>
  </div>
</template>

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

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

在这个例子中，父组件提供的 <p> 标签内容会替换子组件 <slot> 标签内的默认内容。

具名插槽

Vue 允许你定义多个插槽，并为它们指定名字（称为具名插槽）。这样，父组件就可以为特定的插槽提供内容。

子组件:

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件:

<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>这是头部</h1>
      </template>
      <p>这是主体内容。</p>
      <template v-slot:footer>
        <p>这是页脚</p>
      </template>
    </ChildComponent>
  </div>
</template>

在这个例子中，父组件通过 v-slot 指令为 header 和 footer 具名插槽提供了内容。

作用域插槽

作用域插槽是一种特殊的插槽，允许你将数据从子组件传递到父组件的插槽内容中。

子组件:

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

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

父组件:

<template>
  <div>
    <ChildComponent>
      <template v-slot:default="{ user }">
        <p>姓名: {{ user.name }}, 年龄: {{ user.age }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

在这个例子中，子组件通过 slot 属性的 user prop 将用户数据传递给父组件。父组件在 template 标签内通过 v-slot 指令的解构赋值来接收这个数据，并在插槽内容中使用。

总结

插槽是 Vue 中一个非常强大的功能，它允许你创建更加灵活和可复用的组件。通过基础插槽、具名插槽和作用域插槽，你可以根据需要在父组件中定制子组件的内容。理解并熟练掌握插槽的使用，将极大地提升你构建 Vue 应用的能力。