当前位置：首页 > article >正文

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

article 2024/12/2 10:49:48

在开发 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>