关于Vue中的插槽(solt)的学习，我的博客是最容易懂的博客！！！不接受反驳！！！

本文链接：https://blog.youkuaiyun.com/TianGuaJSTec/article/details/108094333

本文深入解析Vue.js中的插槽机制，包括匿名插槽和具名插槽的使用方式，以及如何通过模板语法实现动态内容插入，为开发者提供详细的实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于插槽的理解：

插槽就是：在子组件中，提供一个给父组件使用的占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

一：匿名插槽（举一个最简单的例子）：

子组件：

<template>
  <div style="border: 1px solid crimson">
    <p>hello world下面</p>
    <slot></slot>
    <p>hollo world上面</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
}
</script>

父组件：

<template>
  <div class="home">
    <HelloWorld>
      <p>1234567890</p>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

效果：
这里就正好插在hello world上面和hello world下面的总中间在这里插入图片描述

二：具名插槽：

子组件：

<template>
  <div style="border: 1px solid crimson">
    <p>------------</p>
    <slot name="header"/><!--这个是具名插槽-->
    <slot name="body"/><!--这个是具名插槽-->
    <slot/><!--这个是对应的匿名插槽，等价于 <slot name="default"></slot>-->
    <slot name="footer"/><!--这个是具名插槽-->
    <p>------------</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
}
</script>

父组件：

<template>
  <div class="home">
    <HelloWorld>
      <template #header><!--简写-->
        <p>**头部**</p>
      </template>
      <template #[body]><!--这里引用的是data里面的数据，动态渲染-->
        <p>**身体**</p>
      </template>
      <template v-slot:footer>
        <p>**脚部**</p>
      </template>
      <h3>身体</h3><!--这个是匿名插槽-->
    </HelloWorld>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data(){
    return{
      body:'body'
    }
  }
}
</script>