Vue3 Composition API检测具名插槽是否存在时报错如何解决？

错误原因 #

你在computed的回调函数中额外声明了slots形参，直接覆盖了从setup上下文解构出来的slots变量。同时computed的getter函数本身不会传入任何参数，因此回调内拿到的slots是undefined，访问topContent属性自然会抛出类型错误。

修正方案 #

直接移除computed回调的slots形参即可，修正后的逻辑代码如下：

setup (_, { slots }) {
    const hasTopContent = computed(() => {
        console.log(slots.topContent);
        return slots.topContent && slots.topContent().length;
    });

    return {
        hasTopContent
    }
}

上述逻辑可以正常判断top-content具名插槽是否有传入内容，也能兼容插槽内容被v-if动态控制的场景，插槽内容更新时computed会自动重新计算。

内容的提问来源于stack exchange，提问作者TheRealPapa