Vue3组合式API中如何为计算属性传递动态ref？

Vue的computed本身不支持直接传递参数，但可以让它返回一个接收响应式变量作为参数的函数，这样就能用单个计算属性处理多个MultiSelect的选中项标签，完全避免代码冗余。

具体实现步骤： #

1. 定义带泛型的计算属性，返回一个函数

import { computed, Ref } from 'vue';

// 用泛型约束响应式变量的类型，替代any，提升类型安全性
const itemsSelected = computed(() => {
  return <T>(selector: Ref<T[]>) => {
    const count = selector.value.length;
    return count > 1 ? `${count} items selected` : `${count} item selected`;
  };
});

这里泛型T可以适配你的selectedClients和selectedCars的元素类型（比如Client或Car），确保类型检查生效。

2. 在模板中给每个MultiSelect传递对应的响应式变量

<MultiSelect
  v-model="selectedClients"
  :selected-items-label="itemsSelected(selectedClients)"
  :options="clientsList"
  option-label="firstName"
  option-value="id"
/>

<MultiSelect
  v-model="selectedCars"
  :selected-items-label="itemsSelected(selectedCars)"
  :options="carsList"
  option-label="carType"
  option-value="id"
/>

为什么这个方案可行？ #

当你调用itemsSelected(selectedClients)时，函数内部访问了selector.value，Vue的响应式系统会自动追踪这个依赖。一旦selectedClients或selectedCars的内容变化，函数会重新计算并返回更新后的标签文本，完全符合PrimeVue的selected-items-label需求。

如果需要更严谨的类型定义，可以提前声明你的数据类型：

// 示例类型定义
interface Client {
  id: number;
  firstName: string;
}

interface Car {
  id: number;
  carType: string;
}

// 响应式变量声明
const selectedClients = ref<Client[]>([]);
const selectedCars = ref<Car[]>([]);

这样整个实现既保持了代码简洁，又兼顾了TypeScript的类型安全，完美解决重复写计算属性的问题。

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