插槽slot在vue中的使用

介绍

在 Vue.js 中，插槽（slot）是一种用于实现组件内容分发的功能。通过插槽，可以让父组件在使用子组件时自定义子组件内部的内容。插槽提供了一种灵活的方式来组合和复用组件。

项目中有很多地方需要调用一个组件，比如弹窗，但是内容又不固定，有个可能弹出是表格，有的可能弹出是照片，这个决定于需要调用这个子组件的父组件，这种情况下就可以在自组建（这个弹窗中）使用slot，占坑，slot的HTML元素和内容，完全取决于使用他的父组件给他传了啥。

当内容是一个复杂的模板，可以用插槽传入！

插槽的基本概念

1. 默认插槽：

   • 最简单的插槽形式，允许父组件在子组件的指定位置插入内容。

<template>
  <div>
    <slot></slot>
  </div>
</template>

具名插槽：

• 可以为插槽命名，父组件可以有选择地插入特定内容到子组件的不同插槽中。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽：

• 允许父组件访问子组件的数据（属性），通过插槽提供的数据来渲染内容。

<template>
  <slot :item="item"></slot>
</template>

以下是使用演示

child.vue

<template>
  <div>
    <slot></slot>
    child的内容
    <slot name="test"></slot>
    <slot name="test2"></slot>
  </div>
</template>

<script>
export default {
  name: "child"
}
</script>

<style scoped>

</style>

app.vue

<script setup>
import child from "./views/child.vue";
import {ref} from "vue";
const count = ref(100)

</script>

<template>
  <child>
    <div>父亲加的默认插槽</div>
    <template #test>
      <div>
        父亲加的具名插槽
      </div>
    </template>
    <template #test2>
      <div>
        父亲的作用域插槽，数据来自父亲:{{count}}
      </div>
    </template>
  </child>
</template>