Vue组合式API setup函数中如何使用props传入的tabs属性？

错误原因 #

该报错由两个基础用法错误导致：

• setup 函数的第一个入参就是组件的props对象，你没有在setup的参数位声明接收props，自然无法在内部访问到tabs属性
• 要把props里的属性转为可通过.value访问的响应式ref对象，需要用到你已经导入的toRefs方法做转换

修正后的代码 #

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  PropType,
  toRefs,
} from '@vue/composition-api'
import i18n from '@/setup/i18n'

export default defineComponent({
  name: 'ProgramModal',

  props: {
    tabs: Array as PropType<Array<any>>,
  },

  // 第一步：声明接收props参数
  setup(props) {
    // 第二步：用toRefs把props里的tabs转为ref响应式对象
    const { tabs } = toRefs(props)
 
    const changeTab = (selectedTab: { id: number }) => {
      // 注意：这里直接修改prop的属性不符合Vue单向数据流规范
      // 建议通过emit事件通知父组件修改tabs数据源，避免Vue抛出警告
      tabs.value.map((t) => {
        t.id === selectedTab.id ? (t.current = true) : (t.current = false)
      })
    }

    return {
      tabs,
      changeTab,
      // 注意你原来的代码里ariaLabel没有定义，要自己补全对应的逻辑
      // ariaLabel,
    }
  },
})
</script>

额外注意事项 #

• 直接修改Prop的属性值不符合Vue单向数据流的设计规范，运行时Vue会抛出修改prop的警告。建议把tabs的修改逻辑放在父组件，子组件通过emit触发自定义事件，携带选中的tab信息给父组件完成数据源修改。
• 你原代码return里的ariaLabel没有对应的定义逻辑，需要自行补充避免新的报错。

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