插槽slot

一、简介：

        插槽是 Vue 组件化开发中非常强大且灵活的工具，它使得组件的复用性和可定制性大大提高。通过合理地使用不同类型的插槽，可以构建出更加灵活和可维护的 Vue 应用程序。

二、使用场景

1. 可重用组件的定制化

   比如一个通用的弹窗组件，弹窗的标题、内容、按钮等部分可以通过插槽让父组件根据不同的业务场景进行定制。

2. 布局组件

   像一个布局框架组件，包含头部、侧边栏、主体等区域，通过具名插槽让父组件在不同区域插入不同的组件或内容。

三、插槽的分类和使用

默认插槽 、具名插槽、 作用域插槽

1、默认插槽

如果父组件没有为该插槽提供特定内容，就会显示插槽的默认内容。

如在子组件中：

<template>
  <div>
    <slot>这是默认内容</slot>
  </div>
</template>

 2、具名插槽

如在子组件中 通过给插槽添加name属性：

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

如父组件使用子组件时，通过v-slot指令，指定插入：

<template>
  <my-component>
    <template v-slot:header>头部内容</template>
    <template v-slot:default>主体内容</template>
    <template v-slot:footer>底部内容</template>
  </my-component>
</template>

3、作用域插槽

作用域插槽允许子组件传递数据给父组件，并且在父组件中根据这些数据渲染不同的内容

如在子组件中，在<slot>元素上绑定属性来传递数据：

<template>
  <div>
    <slot :data="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是来自子组件的数据'
    };
  }
};
</script>

• 父组件在使用作用域插槽时，可以通过解构赋值获取子组件传递的数据：

  <template>
    <my-component>
      <template v-slot:default="{ data }">
        <p>{{ data }}</p>
      </template>
    </my-component>
  </template>