uni-app 小程序环境无法获取组件内通过 defineSlots 或 useSlots() 定义的 slot 的内容

uni-app 小程序环境无法获取组件内通过 defineSlots 或 useSlots() 定义的 slot 的内容

示例代码:

const slots = defineSlots<Slots>()  
type SlotFn = (props?: Record<string, unknown>) => any  
interface Slots {  
  default?: SlotFn  
  pre?: SlotFn  
}  

function demoMethod() {  
  const defaultSlots = slots.default?.() || [] // 这里在小程序中得到的时一个 bool 类型, 后面就该报错,在h5环境下时正常的  
  const preSlots = slots.pre?.() || []  
  const data = hasPre.value ? preSlots.map((slot: any) => slot.children).join('') : defaultSlots.map((slot: any) => slot.children).join('')  
  if (!data) {  
    warning({ msg: '没有找到代码内容' })  
    return  
  }  
  // ...  
}

操作步骤:

  • 使用上述代码

预期结果:

  • 能和h5环境一样,能正确得到一个对象,用来拿到 slot 下的内容。

实际结果:

  • slots.default 是一个 true 的 bool 类型

bug描述:

如题,vue3,ts setup 模式,定义一个组件,组件内通过 defineSlots 定义了已知类型的 slot,想着组件内,动态获取父组件中对某(或default)设置的slot的内容,以default为例:

const slots = defineSlots<Slots>()  
type SlotFn = (props?: Record<string, unknown>) => any  
interface Slots {  
  default?: SlotFn  
  pre?: SlotFn  
}  

function demoMethod() {  
  const defaultSlots = slots.default?.() || [] // 这里在小程序中得到的时一个 bool 类型, 后面就该报错,在h5环境下时正常的  
  const preSlots = slots.pre?.() || []  
  const data = hasPre.value ? preSlots.map((slot: any) => slot.children).join('') : defaultSlots.map((slot: any) => slot.children).join('')  
  if (!data) {  
    warning({ msg: '没有找到代码内容' })  
    return  
  }  
  // ...  
}

上面行 const defaultSlots = slots.default?.() || [] // 这里在小程序中得到的时一个 bool 类型, 后面就该报错,在h5环境下时正常的 为异常部分。

之前跟了帖子:https://ask.dcloud.net.cn/question/213119?notification_id-1564925rf-falseitem_id-308280__answer_id-308280__single-TRUE

附件:image


更多关于uni-app 小程序环境无法获取组件内通过 defineSlots 或 useSlots() 定义的 slot 的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

小程序不支持

更多关于uni-app 小程序环境无法获取组件内通过 defineSlots 或 useSlots() 定义的 slot 的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好吧,以为是可以解决的呢,那只能做兼容处理了,谢谢 @DCloud_UNI_JBB

这是一个已知的uni-app平台差异问题。在小程序环境中,defineSlotsuseSlots()的行为与H5环境存在差异。

在小程序平台,slot相关的API返回的是布尔值来表示slot是否存在,而不是返回实际的VNode数组。这是由小程序底层渲染机制的限制导致的。

解决方案:

  1. 使用条件编译处理平台差异
function demoMethod() {
  let defaultSlots = []
  let preSlots = []
  
  // #ifdef H5
  defaultSlots = slots.default?.() || []
  preSlots = slots.pre?.() || []
  // #endif
  
  // #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO
  // 小程序环境使用其他方式获取slot内容
  // 或者调整组件设计,避免直接操作slot VNode
  // #endif
}
回到顶部