Vue中向子组件传递具名插槽的问题求助

我明白你现在遇到的插槽传递问题了——Vue的具名插槽转发确实容易让人绕晕，尤其是当组件嵌套需要传递插槽内容的时候。让我给你梳理一下正确的实现方式，分两种场景来说明：

场景1：父组件直接提供插槽内容给子组件 #

如果父组件自己已经确定了要传给子组件的图片内容（比如你通过vue-svg-loader加载的SVG），那直接在调用子组件时，把具名插槽的内容传递给子组件的同名插槽即可。

先看子组件（比如Child.vue）的代码，它只负责渲染image具名插槽的内容：

<template>
  <!-- 子组件的具名插槽，用于展示图片 -->
  <slot name="image"></slot>
</template>

然后父组件（Parent.vue）调用子组件，同时传递自己的image插槽内容，再加上父组件的文本：

<template>
  <div class="parent-wrapper">
    <!-- 调用子组件，并把父的image插槽内容传给子组件 -->
    <Child>
      <template #image>
        <!-- 这里就是你用vue-svg-loader加载的SVG组件 -->
        <MySvgIcon />
      </template>
    </Child>
    <!-- 父组件自己的文本内容 -->
    <p>这是父组件要展示的额外文本</p>
  </div>
</template>

<script setup>
import Child from './Child.vue'
// 导入通过vue-svg-loader加载的SVG组件
import MySvgIcon from './assets/my-icon.svg'
</script>

这样子组件就能正确渲染父组件传递过来的SVG图片，父组件也能同时展示子组件的图片和自己的文本。

场景2：父组件作为中间层，转发外部传入的插槽给子组件 #

如果父组件本身是被外部调用的（比如在App.vue中使用父组件），需要把外部传入的image插槽转发给子组件，那就要在父组件中先定义自己的image具名插槽，然后在调用子组件时，将这个插槽内容传递过去：

父组件（Parent.vue）的代码：

<template>
  <div class="parent-wrapper">
    <Child>
      <!-- 转发父组件收到的image插槽给子组件 -->
      <!-- 如果子组件的插槽有作用域属性，记得用v-bind传递slotProps -->
      <template #image="slotProps">
        <slot name="image" v-bind="slotProps"></slot>
      </template>
    </Child>
    <p>父组件的额外文本</p>
  </div>
</template>

<script setup>
import Child from './Child.vue'
</script>

然后在App.vue中使用父组件时，传入SVG组件作为image插槽内容：

<template>
  <Parent>
    <template #image>
      <MySvgIcon />
    </template>
  </Parent>
</template>

<script setup>
import Parent from './Parent.vue'
import MySvgIcon from './assets/my-icon.svg'
</script>

为什么之前不符合预期？ #

大概率是你没有正确地在父组件中转发/传递插槽内容——比如直接在父组件里写了图片，但没有把它放到子组件的image插槽中，或者在转发作用域插槽时没有传递插槽属性，导致子组件无法获取到内容。

另外要注意：Vue 3中使用<template #image>（缩写语法），Vue 2.6+则用<template v-slot:image>，如果是更老的Vue 2版本，可能需要用slot="image"属性，但现在推荐用v-slot语法。

内容的提问来源于stack exchange，提问作者user3187675