Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
isanonymous opened this issue Jan 29, 2023 · 8 comments

Comments

@isanonymous
Copy link

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
Copy link

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

image

/** 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
Copy link
Author

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

image
/** 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, 是可以正常运行的
image

@Niefee
Copy link

Niefee commented Jan 4, 2024

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

@Niefee
Copy link

Niefee commented Jan 4, 2024

求vue3的写法

@LeiDeMing
Copy link

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

@Niefee
Copy link

Niefee commented Apr 23, 2024

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

@LeiDeMing
Copy link

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

这样写应该就行了。

@ZeMinCai
Copy link

set About.vue

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants