使用计算属性实现视图切换：值映射与emit参数传递

需求回顾 #

ViewControls组件内部的SwitchControls会返回按钮点击的数字索引（0对应列表视图，1对应网格视图），需要将这个数字转换为对应的字符串（'list'/'grid'），通过v-model同步给父组件。

原实现的问题 #

1. 模板中SwitchControls的v-model绑定了独立的snippetValue，未与处理值转换的currentValue关联，导致状态不一致
2. 未声明modelValue props，无法接收父组件传递的初始值
3. 多余的snippetValue ref没有实际作用

正确实现代码 #

组件模板（ViewControls.vue）

<template>
  <SwitchControls v-model="currentValue">
    <button>
      <i class="icon list" />
    </button>
    <button>
      <i class="icon grid" />
    </button>
  </SwitchControls>
</template>

组件脚本

import { computed } from 'vue'

export default {
  props: {
    modelValue: {
      type: String,
      default: 'list',
      validator: val => ['list', 'grid'].includes(val)
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 负责值转换的双向计算属性
    const currentValue = computed({
      // 将父组件的字符串值转为SwitchControls需要的数字索引
      get() {
        return props.modelValue === 'list' ? 0 : 1
      },
      // 将SwitchControls返回的数字索引转为字符串emit给父组件
      set(val) {
        const targetValue = val === 0 ? 'list' : 'grid'
        emit('update:modelValue', targetValue)
      }
    })

    return { currentValue }
  }
}

关键说明 #

• props声明：明确modelValue的类型为字符串，添加校验确保传入值合法，同时设置默认值保证组件初始化状态正确
• computed双向绑定：get方法处理父→子的值转换（字符串转数字），set方法处理子→父的值转换（数字转字符串并emit）
• 模板绑定：将SwitchControls的v-model直接绑定到currentValue，确保组件内部状态与父组件同步

内容的提问来源于stack exchange，提问作者Jessika