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环境下时正常的 为异常部分。
附件:
更多关于uni-app 小程序环境无法获取组件内通过 defineSlots 或 useSlots() 定义的 slot 的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html
小程序不支持
更多关于uni-app 小程序环境无法获取组件内通过 defineSlots 或 useSlots() 定义的 slot 的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html
好吧,以为是可以解决的呢,那只能做兼容处理了,谢谢 @DCloud_UNI_JBB
这是一个已知的uni-app平台差异问题。在小程序环境中,defineSlots和useSlots()的行为与H5环境存在差异。
在小程序平台,slot相关的API返回的是布尔值来表示slot是否存在,而不是返回实际的VNode数组。这是由小程序底层渲染机制的限制导致的。
解决方案:
- 使用条件编译处理平台差异
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
}

