【Vue】Vue 判断插槽内容是否加载完成

需求

现有一个 ArticleList 组件，里面有个插槽用来展示各个文章项目，还有个分页组件用来获取文章分页数据。文章项目的数据通过网络请求获取到然后传入 ArticleList，这期间会有一段时间的空白。为了提升用户体验，现在需要在这段时间显示一个占位内容。

ArticleList.vue 的示意代码：

<template>
	<div>
		<slot></slot>
		<my-pagination />
	</div>
</template>

分析

如果没有分页组件，可以直接用默认插槽的占位显示占位内容，有分页组件的话，就需要判断插槽的子元素是否存在，如果不存在则显示另一端内容。

实现

这里用 Vue2 的 Options API 作为演示，Vue3 的 setup 里面可以通过结构 setup 的第二个参数获取 $slots 对象，script setup 中可以使用 useSlots() 获取 $slots 对象。

通过 $slots.插槽名() 可以获取到插槽的 VNode 列表，在这里我们获取默认插槽，即 $slots.default()，通过判断这个 VNode 列表中的 children 项是否有内容即可实现判断插槽内容是否加载完成。

<template>
	<div v-if="isDefaultSlotLoaded">
		<slot></slot>
		<my-pagination />
	</div>
	<div v-else>
		<!-- 显示占位内容 -->
		<p>Now Loading...</p>
	</div>
</template>

<script>
export default {
	computed: {
		isDefaultSlotLoaded() {
			return this.$slots.default()[0].children.length > 0
		}
	}
}
</script>