Vue3组合式API setup函数中如何正确获取数组类型的props值？

问题根源 #

你代码的核心问题是setup函数的入参解构错误：
Vue3的setup函数第一个入参本身就是完整的props对象，你代码中写setup({modelValue, props} : any, ...)相当于从props对象里额外解构一个叫props的子属性，这个属性根本不存在，导致你后续用到的props变量是undefined，自然无法读取items的值。
模板能正常遍历items是因为模板默认绑定全局的$props对象，不受你setup里错误解构的影响。

修复方案 #

第一步：修正setup入参写法 #

两种可选写法，根据你的使用习惯选择即可：

// 写法1：保留props整体引用，适合需要频繁访问多个props属性的场景
setup(props : any, {emit} : any ) {
  const modelValue = props.modelValue
  // 后续逻辑
}

// 写法2：直接解构所有需要的props属性，代码更简洁
setup({modelValue, items} : any, {emit} : any ) {
  // 后续逻辑
}

第二步：正确初始化selected变量 #

优先用ref包裹selected（后续要替换整个选中值的操作更简单），同时加空值判断避免父组件初始传入空数组时报错：

import { ref, watch } from 'vue'

setup(props : any, {emit} : any ) {
  let is_active = ref(false);
  // 初始化加空值兜底
  let selected = ref(
    props.items?.length 
      ? {
          label: props.items[0].label,
          icon: props.items[0].icon,
          class: props.items[0].class
        }
      : {}
  );

  // 若需要父组件动态修改items数组时，自动更新selected为新数组的第一个元素，加这段监听逻辑
  watch(() => props.items, (newItems) => {
    if (newItems?.length) {
      selected.value = {
        label: newItems[0].label,
        icon: newItems[0].icon,
        class: newItems[0].class
      }
    }
  }, { deep: true, immediate: true })

  // 其余业务逻辑
}

如果你确实想用reactive，只要修正入参后直接写let selected = reactive(props.items[0] || {})也可以正常生效。

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