vue2 我们可以通过 this.$slots[name] 来判断 slot 插槽是否是空元素，然后做一些特殊处理。
简单的例子
{
methods: {
hasSlot(name) {
return !!this.$slots[name]
}
}
}
那么在 vue3 中我们怎么使用呢？本文提供了以下几种方法。
我们都知道，vue3 提供了 composition api，我们可以在 setup 函数做一些组件的初始化。
setup() 钩子有什么作用呢？
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
- 需要在非单文件组件中使用组合式 API 时。
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
我们可以在 setup() 函数的第一个参数访问组件的属性-props，这里还有第二个参数 context
可以通过 context 来访问组件的内部一些属性，例如 attrs，slots，emit，expose 等属性。
export default {
setup(props, context) {
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs);
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots);
// 触发事件（函数，等价于 $emit）
console.log(context.emit);
// 暴露公共属性（函数）
console.log(context.expose);
},
};
那么我们就可以在 setup 处理 slots
export default {
setup(props, { slots }) {
const hasSlot = (name) => !!slots[name];
return { hasSlot };
},
};
template 里面访问 $slots
slots 对象也暴露在 template 组件，可以通过 $slots 访问，例如下面例子
<template>
<footer v-if="$slots.footer">
<h3>footer heading</h3>
<slot name="footer" />
</footer>
</template>
