Vue3按钮切换功能实现与组件化封装指南

1. Vue3 按钮切换功能实现解析

这个互斥按钮切换功能在前端开发中非常常见，比如设备控制面板的开关状态、表单的启用禁用切换等场景。Vue3的组合式API让我们能够用更简洁的代码实现这类交互逻辑。

1.1 基础实现方案

我们先来看最基础的实现方式，这也是很多Vue初学者最先接触的模式：

html复制<template>
  <div class="btn-container">
    <button 
      v-if="isActive"
      @click="toggleStatus"
      class="active-btn"
    >
      启用
    </button>
    <button
      v-else
      @click="toggleStatus"
      class="inactive-btn"
    >
      禁用
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isActive = ref(true)

const toggleStatus = () => {
  isActive.value = !isActive.value
}
</script>

这种实现有几点值得注意：

1. 使用v-if和v-else确保同一时间只显示一个按钮
2. 通过简单的布尔值切换实现状态变更
3. 按钮样式通过不同的class区分视觉状态

1.2 状态管理的进阶思考

虽然上面的实现很简洁，但在实际项目中我们可能需要考虑更多因素：

javascript复制const status = ref('inactive') // 可以用枚举值替代布尔值

const toggleStatus = () => {
  status.value = status.value === 'active' ? 'inactive' : 'active'
  // 可以在这里添加状态变更的副作用逻辑
  logStatusChange(status.value)
}

使用字符串状态而非布尔值的好处：

• 状态语义更明确
• 便于扩展更多状态（如'loading'、'error'等）
• 方便与后端API的状态字段对齐

2. 组件化与复用方案

2.1 封装为可复用组件

在实际项目中，我们通常会把这种交互逻辑封装成组件：

html复制<!-- ToggleButton.vue -->
<template>
  <button
    :class="buttonClass"
    @click="emitToggle"
  >
    {{ buttonText }}
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  activeText: