uni-app $slots.xxx 在 app vue 下不生效，nvue/h5 下测试通过

uni-app $slots.xxx 在 app vue 下不生效，nvue/h5 下测试通过

测试过的手机：

各种手机都无法实现

示例代码：

<template>  
  <view class="content">  
    <image class="logo" src="/static/logo.png"></image>  
    <view class="">  
      <slot-bug>  
        <template #right>  
          <view>xxx</view>  
        </template>  
      </slot-bug>  
    </view>  
  </view>  
</template>

<template>  
  <view>  
    <text>slot-bug</text>  
    <view class="">  
      <slot name="right"></slot>  
    </view>  
    <view class="">  
      {{ Boolean($slots.right) }}  
    </view>  
  </view>  
</template>  
<script>  
export default {  
  name: "solt-bug",  
  created() {  
    console.log(Object.keys(this.$slots));  
  },  
}  
</script>  
<style>  
</style>

操作步骤：

运行 APP 即可见

预期结果：

预期：Boolean($slots.right) is true

实际结果：

实际：Boolean($slots.right) is false

bug描述：

$slots.xxx 在 app vue 下不生效，slots.xxx 如果获取到相应的 slot


更多关于uni-app $slots.xxx 在 app vue 下不生效，nvue/h5 下测试通过的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

感谢反馈，这边排查下

更多关于uni-app $slots.xxx 在 app vue 下不生效，nvue/h5 下测试通过的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已复现问题，后续会修复，可以先使用$scopedSlots

在 uni-app 中，$slots 用于访问组件的插槽内容。根据你的描述，$slots.xxx 在 app 平台的 vue 页面下不生效，而在 nvue 和 H5 平台下测试通过。这可能是由于 app 平台的 vue 页面对 $slots 的支持存在一些限制或差异。

可能的原因和解决方案

  1. 平台差异：

    • uni-app 在不同的平台（如 app、nvue、H5）下有不同的实现机制。app 平台的 vue 页面可能对 $slots 的支持不够完善，或者存在一些限制。

  2. 插槽名称问题：

    • 确保你在组件中定义的插槽名称与使用 $slots.xxx 时的名称完全一致。大小写敏感，确保没有拼写错误。

  3. 插槽内容为空：

    • 如果插槽内容为空，$slots.xxx 可能返回 undefined 或 false，导致在 app 平台的 vue 页面下不生效。你可以在使用 $slots.xxx 之前进行检查。

  4. 使用 v-if 或 v-show：

    • 如果你在使用 v-if 或 v-show 控制插槽内容，确保条件表达式在 app 平台的 vue 页面下也能正确执行。

  5. 使用默认插槽：

    • 如果 $slots.xxx 不生效，可以尝试使用默认插槽 $slots.default，并在组件内部通过条件判断来处理不同的插槽内容。

  6. 使用 scoped slots：

    • 如果普通插槽不生效，可以尝试使用 scoped slots，它提供了更灵活的插槽机制。

示例代码

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    if (this.$slots.header) {
      console.log('Header slot is present');
    }
    if (this.$slots.default) {
      console.log('Default slot is present');
    }
    if (this.$slots.footer) {
      console.log('Footer slot is present');
    }
  }
}
</script>
回到顶部