Vue 3 中实现页面特定功能控制

在开发 Vue 应用时，我们经常会遇到需要在特定页面启用或禁用某些功能的情况。本文将以 A父.vue 页面为例，探讨如何在点击汇总菜单时仅在该页面生效，而在其他页面不生效的问题。

1. 利用 Vue 3 的 provide 和 inject 实现状态传递

Vue 3 提供了 provide 和 inject 两个函数，允许我们在父组件和子组件之间传递状态，而不需要通过 props 逐级传递。

步骤一：在父组件中提供状态

首先，在 A父.vue 父组件中，我们定义一个状态 isComponentPage 来标识当前是否为组件页面，并使用 provide 函数将其提供给子组件。

<!-- A父.vue -->
<script setup>
import { provide, ref } from 'vue';
import son from '@/components/son.vue';const isComponentPage = ref(true);  // 标识是否为组件页面
provide('isComponentPage', isComponentPage);
</script>

步骤二：在子组件中注入状态

接着，在 son.vue 子组件中，我们使用 inject 函数来获取父组件提供的状态，并根据该状态控制 showSummaryRow 的值。

<!-- son.vue -->
<script setup>
import { inject, computed } from 'vue';const isComponentPage = inject('isComponentPage');  // 从父组件获取状态
const showSummaryRow = computed(() => {return isComponentPage.value;  // 仅在组件页面时显示汇总行
});
</script>

2. 根据状态控制汇总按钮的显示

在 son.vue 中，我们需要确保汇总按钮的显示逻辑依赖于 showSummaryRow 的值。这样，只有在 isComponentPage 为 true 时，汇总按钮才会显示。

<template><ul class="server-list"><li v-if="showSummaryRow" class="server-item" @click="handleSummaryClick"><el-icon color="#0256FF"><Monitor /></el-icon><span class="server-text">汇总：共 {{ totalServerCount }} 个服务器</span></li></ul>
</template>

3. 其他页面无需额外操作

在其他页面中，由于没有提供 isComponentPage 或其值为 false，汇总按钮将不会显示。这样，我们就实现了仅在 A父.vue 页面中显示汇总按钮的功能。

总结

通过使用 Vue 3 的 provide 和 inject，我们可以轻松地在特定页面控制功能的显示与隐藏，而无需依赖于路由判断。这种方法使得状态管理更加灵活，同时也保持了组件的独立性和可重用性。希望这篇文章能帮助你在 Vue 3 项目中实现类似的功能控制。