能否将v-for属性传递给HTML中的插槽组件？插槽prop不生效问题

问题根源 #

作用域插槽的传值仅在父组件调用插槽的直接上下文范围内生效，v-slot参数声明不能写在插槽内部嵌入的子组件模板中，且嵌入子组件时需要主动将插槽拿到的参数作为prop传递，否则会出现属性未定义报错。

修正方案 #

方案1：直接使用插槽模板（适合简单展示场景）

无需额外封装组件，直接在<display-list>内部声明插槽接收参数即可使用：

<display-list
    field="Display Ingredient"
    :map_id="instance => instance.ingredient_id"
    :map_instances="instances => $recipe.ingredients"
>
  <template v-slot:default="liProps">
    <div class="vue_wrap">
      {{ liProps.instance.description }}
    </div>
  </template>
</display-list>

方案2：封装独立插槽组件（适合复杂展示逻辑，保留复用性）

1. 首先给<display-ingredient>组件声明instance属性：

<!-- display-ingredient 组件代码 -->
<template>
  <div class="vue_wrap">
    {{ instance.description }}
  </div>
</template>
<script>
export default {
  props: {
    instance: {
      type: Object,
      required: true
    }
  }
}
</script>

2. 调用时将插槽拿到的instance主动传入封装组件：

<display-list
    field="Display Ingredient"
    :map_id="instance => instance.ingredient_id"
    :map_instances="instances => $recipe.ingredients"
>
  <template v-slot:default="liProps">
    <display-ingredient :instance="liProps.instance" />
  </template>
</display-list>

注意事项 #

原有代码中:map_instances="instances => {{ $recipe->ingredients }}"存在语法错误：v-bind绑定的是原生JS表达式，不需要额外包裹{{}}，如果是后端注入的模板变量需要提前挂载到Vue实例上再使用。

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