当前位置：首页 > news >正文

Vue 3 中 slot插槽的使用方法

news 2025/7/4 8:26:53

插槽，名字挺新奇。但不要被他的名字难住。其实就是父组件向子件件传递信息的一种手段。我们可以用这样的方法向子组件传值。

父组件（app.vue)

<template>
 <MyCompoent :transData="{a:reactiveObj.a,breactiveObj.b,c}">
</template>

<script>
  import {reactive,ref} from 'vue';
  //批量定义响应式变量
  const reactiveObj = reactive(a,b)
  //单独定义的响应式变量
  const c = ref('c的值')
  //其他方式定义的能在标签用的...
</script>

子组件(MyComponent.vue)

<template>
  <el-row>
   <el-col>{{a}}</el-col>
  </el-row>
</template>

<script>
  import {defineProps} from 'vue'
  const prop = defineProps({transData:{type:Object,default:()=>({})}})
  const {a,b,c}=prop.transData;
</script>

通过这样的方法可以向子组件传值。那么插槽呢，下面详细说一说。这种传值的方式。其实传的不是『值』，而是更多样的信息，如代码片段等。

1. 匿名插槽

匿名插槽是最基础的插槽类型，用于将父组件提供的内容插入到子组件指定的位置。

子组件（MyComponent.vue）

<template>
  <div>
    <h2>组件标题</h2>
    <!-- 定义匿名插槽 -->
    <slot></slot>
  </div>
</template>

<script setup>
// 这里可以写组件的逻辑代码
</script>

在上述代码中，<slot></slot> 定义了一个匿名插槽，它是父组件内容的插入点。

父组件（App.vue）

<template>
  <div>
    <MyComponent>
      <!-- 插入到匿名插槽的内容 -->
      <p>这是插入到组件内部的内容</p>
    </MyComponent>
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

2. 具名插槽

具名插槽允许在一个组件中定义多个插槽，并让父组件可以指定内容插入到哪个插槽中。

子组件（MyComponent.vue）

<template>
  <div>
    <header>
      <!-- 具名插槽：header -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 匿名插槽 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 具名插槽：footer -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup>
// 组件逻辑代码
</script>

这里定义了三个插槽，一个匿名插槽和两个具名插槽（header 和 footer）。

父组件（App.vue）

<template>
  <div>
    <MyComponent>
      <!-- 插入到具名插槽 header 的内容 -->
      <template #header>
        <h1>这是头部内容</h1>
      </template>
      <!-- 插入到匿名插槽的内容 -->
      <p>这是主要内容</p>
      <!-- 插入到具名插槽 footer 的内容 -->
      <template #footer>
        <p>这是底部内容</p>
      </template>
    </MyComponent>
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

在父组件中，使用 <template #插槽名> 语法来指定内容要插入到哪个具名插槽中，# 是 v-slot: 的缩写。

3. 作用域插槽

作用域插槽允许父组件在插入内容时访问子组件的数据。

子组件（MyComponent.vue）

<template>
  <div>
    <!-- 作用域插槽，向父组件暴露数据 -->
    <slot :message="message"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('这是子组件的数据');
</script>

在子组件中，通过 :message="message" 将 message 数据传递给插槽，这样父组件就可以使用这个数据。

父组件（App.vue）

<template>
  <div>
    <MyComponent>
      <!-- 接收子组件传递的数据 -->
      <template #default="{ message }">
        <p>{{ message }}</p>
      </template>
    </MyComponent>
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

在父组件中，使用 <template #default="{ 数据名 }"> 语法来接收子组件传递的数据，#default 用于匿名插槽的作用域插槽。