使用动态插槽, 并且插槽名称为 #[变量+变量] 时, 插槽无效 (拼接出来的插槽名称开头为undefined)

[isanonymous]

Version

2.7.14

Reproduction link

gitee.com

Steps to reproduce

!!! 在vue3.2.37中是可以正常工作的, 但是在2.7.14中不行 ( 组件均为 <script setup> )

1. 定义一个会根据props动态产生slot的组件 , 并在其中打印useSlots()
2. 使用该组件, 并使用动态插槽名 <template #[form_slot_prefix+confs.conditionInputs.k]>
   2.1 这样写是无效的 , 产生的slot名 startsWith("undefined") , 后半段的值是正确的
3. 这样写就正常了
   // form_slot_prefix来源为es6的import
   const slotName = form_slot_prefix+confs.conditionInputs.k
<template #[slotName]>

What is expected?

可以这样使用动态插槽名: <template #[form_slot_prefix+confs.conditionInputs.k]>

What is actually happening?

这样写无法工作: <template #[form_slot_prefix+confs.conditionInputs.k]>

[xiaowei-one]

I downloaded your project and found it works well. Could you describe it in more details.

/** EForm.vue */
<el-form>
  <slot name="form_conditionInputs" />
</el-form>

/** DynamicForm.vue */
<e-form :model="formDep.data" :confs="confs" class="DynamicForm">
  <template #[form_slot_prefix+confs.conditionInputs.k]>
    {{ 'I am here' }}
  </template>
</e-form>

[isanonymous]

I downloaded your project and found it works well. Could you describe it in more details.

/** EForm.vue */
<el-form>
  <slot name="form_conditionInputs" />
</el-form>

/** DynamicForm.vue */
<e-form :model="formDep.data" :confs="confs" class="DynamicForm">
  <template #[form_slot_prefix+confs.conditionInputs.k]>
    {{ 'I am here' }}
  </template>
</e-form>

感谢反馈, 用vue-cli创建了一个专门用来复现bug的仓库 https://gitee.com/zzyygg/vue_2_7
当你查看About子页面时, 动态插槽是无效的 (因为使用了<script setup>), 如果使用传统的options API, 是可以正常运行的

[Niefee]

我也有这种话问题，有方案吗

[Niefee]

求vue3的写法

[LeiDeMing]

使用[计算属性]替换复杂的表达式

[Niefee]

vue2现在好像不支持这种写法

[LeiDeMing]

<template #[slotName]> use "+" 这里使用的是[变量 + 变量] </template>
const slotName = computed(() => slot_prefix + about);

这样写应该就行了。

[ZeMinCai]

set About.vue

import { slot_prefix as _slot_prefix } from "../consts";
const slot_prefix = _slot_prefix;