Vue2 中插槽的使用方法

在Vue2的开发中，插槽（slot）是一种非常强大且实用的功能，它允许我们在组件中定义一些可替换的内容区域，从而实现更高程度的组件复用和灵活性。

基本插槽的使用

在父组件中使用子组件时，可以在子组件标签内部放置一些内容。在子组件中，通过<slot>标签来指定这些内容的插入位置。例如：

<!-- 子组件模板 -->
<template>
  <div>
    <h2>这是子组件</h2>
    <slot></slot>
  </div>
</template>

<!-- 父组件模板 -->
<template>
  <div>
    <h1>这是父组件</h1>
    <child-component>
      <p>这是插入到子组件插槽中的内容</p>
    </child-component>
  </div>
</template>

这样，父组件中<child-component>标签内的<p>标签内容就会替换子组件中的<slot>标签。

具名插槽

当子组件中有多个插槽时，我们可以给每个插槽起一个名字，即具名插槽。在父组件中，通过v-slot指令来指定要插入到哪个具名插槽中。例如：

<!-- 子组件模板 -->
<template>
  <div>
    <h2>这是子组件</h2>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

<!-- 父组件模板 -->
<template>
  <div>
    <h1>这是父组件</h1>
    <child-component>
      <template v-slot:header>
        <h3>这是头部内容</h3>
      </template>
      <template v-slot:content>
        <p>这是主体内容</p>
      </template>
    </child-component>
  </div>
</template>

作用域插槽

作用域插槽允许子组件向插槽中传递数据。在子组件中，通过在<slot>标签上绑定属性来传递数据，在父组件中通过v-slot接收并使用这些数据。例如：

<!-- 子组件模板 -->
<template>
  <div>
    <slot :user="userInfo"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: { name: '张三', age: 20 }
    };
  }
};
</script>

<!-- 父组件模板 -->
<template>
  <div>
    <child-component>
      <template v-slot="slotProps">
        <p>{{ slotProps.user.name }}，{{ slotProps.user.age }}岁</p>
      </template>
    </child-component>
  </div>
</template>

通过合理使用插槽，我们可以让Vue2组件的开发更加灵活和高效。