Vue3插槽(Slot)使用详解

一、什么是插槽（Slot）

在Vue.js中，插槽是一种用于在父组件中向子组件传递内容的机制。它允许我们在子组件的模板中定义可插入的内容，并在父组件中传递具体的内容给子组件。

二、默认插槽

默认插槽是最简单的插槽类型。。默认插槽不需要通过v-slot指令进行声明，而是可以直接在子组件的模板中使用<slot>元素。父组件中的内容会自动传递给默认插槽。在父组件中，可以将内容放在子组件标签中，这些内容会自动传递给子组件的默认插槽。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent>
	<h3>这是默认插槽的内容</h3>
  </ChildComponent>
</template>

在以上示例中，父组件的<p>标签中的内容会自动传递给子组件的默认插槽。

三、具名插槽

具名插槽允许我们在子组件中定义多个插槽，并通过名称来区分它们。这样，我们就可以在父组件中为每个插槽指定不同的内容。以下是一个例子：

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent>
     <template #header>
         <h4>子组件header里面的内容</h4>
      </template>
      <template #footer>
         <h5 style="color:#00ff00">
             子组件footer里面的内容
         </h5>
       </template>
    </ChildComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
      <slot name="header"></slot>
      <slot name="footer"></slot>
  </div>
</template>

四、作用域插槽

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。插槽内容无法访问子组件的数据。然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent>
      <template #default="slotProps">
           <h5 style="font-weight: 700" 
           v-for="item in slotProps.message">
           	{{item.name}}年龄是{{item.age}}岁
           </h5>
       </template>
    </ChildComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <slot :message="dataList"></slot>
  </div>
</template>
import { ref } from 'vue'
const dataList = ref([
    {name:'张飞',age:38},
    {name:'貂蝉',age:26},
])

五、总结

Vue3的插槽功能非常强大，它允许我们在组件间灵活地分发和接收内容。无论是默认插槽、具名插槽、作用域插槽还是动态插槽，都能满足我们在实际开发中的各种需求。