uni-app 动态插槽名+插槽传参，失效

uni-app 动态插槽名+插槽传参，失效

示例代码：

子组件child.vue：
<view>
<slot :name="fieldRule.type" type="我是参数" />
</view>  

父组件parent.vue:
<view>
<child :fieldRule="{type:'upload'}">
<template #upload="{type}">
这里的type参数拿不到
</template>
</child>
</view>

操作步骤：

子组件child.vue：  
<view>  
 <slot :name="fieldRule.type" type="我是参数" />  
</view>  

父组件parent.vue:  
<view>  
 <child :fieldRule="{type:'upload'}">  
    <template #upload="{type}">  
        这里的type参数拿不到  
    </template>  
 </child>  
</view>

预期结果：

能正常编译，父组件中能正常接受到参数

实际结果：

编译控制台报错，界面倒是能预览，但是父组件中接受不到参数


## bug描述：

动态插槽名+插槽传参，参数接受不到

| 项目信息         | 详细信息          |
|------------------|-------------------|
| 产品分类         | uniapp/小程序/微信 |
| PC开发环境       | Windows           |
| PC开发环境版本   | win10             |
| 第三方开发者工具 | 1.06.2402040      |
| 基础库版本       | 3.3.1             |
| 项目创建方式     | CLI               |
| CLI版本          | 2.0.2-4000820240401001 |

更多关于uni-app 动态插槽名+插槽传参，失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 动态插槽名+插槽传参，失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用动态插槽名和插槽传参时，可能会遇到失效的问题。这通常是由于 uni-app 的编译机制或 Vue 的版本限制导致的。以下是一些可能的原因和解决方案：

1. 检查 Vue 版本

确保你使用的 Vue 版本支持动态插槽名和插槽传参。动态插槽名和插槽传参是 Vue 2.6.0 及以上版本引入的特性。如果你的 uni-app 项目使用的是较旧的 Vue 版本，可能需要升级。

2. 检查编译模式

uni-app 支持多种编译模式（如 Vue、NVUE 等），不同模式下对 Vue 特性的支持可能有所不同。确保你使用的编译模式支持动态插槽名和插槽传参。

3. 动态插槽名的正确使用

动态插槽名需要使用 v-slot 指令，并且插槽名需要使用方括号 [] 包裹。例如：

<template>
  <component>
    <template v-slot:[dynamicSlotName]="slotProps">
      <div>{{ slotProps.text }}</div>
    </template>
  </component>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header'
    };
  }
};
</script>

4. 插槽传参的正确使用

插槽传参可以通过 v-slot 指令的 slotProps 来实现。确保你在父组件中正确传递了参数，并在子组件中正确使用了这些参数。

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <div>{{ slotProps.text }}</div>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <slot :text="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from ChildComponent'
    };
  }
};
</script>

5. 检查 uni-app 的版本

确保你使用的是最新版本的 uni-app，因为较旧的版本可能不支持某些 Vue 特性。

6. 使用 scopedSlots 作为替代方案

如果你发现动态插槽名和插槽传参在 uni-app 中无法正常工作，可以考虑使用 scopedSlots 作为替代方案。

<template>
  <component :scopedSlots="scopedSlots"></component>
</template>

<script>
export default {
  data() {
    return {
      scopedSlots: {
        header: props => <div>{props.text}</div>
      }
    };
  }
};
</script>
回到顶部