Vue 3中如何动态访问组件属性？

在Vue2中可以通过计算属性返回函数结合this实现动态属性访问，但这套写法在Vue3中无法直接生效，核心原因是setup语法中无组件实例this指向，且computed返回的是Ref包装对象，直接调用会触发类型错误。以下是两种可行的实现方案：

方案一：使用<script setup>语法 #

通过getCurrentInstance获取组件实例代理，封装函数统一处理props、响应式变量的访问：

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

// 定义局部响应式变量
const foo = ref('响应式变量值')
// 声明props
const props = defineProps({
  baz: String
})

// 获取当前组件实例的代理对象
const instance = getCurrentInstance()
const proxy = instance?.proxy

// 封装动态属性访问函数
const $property = (key) => {
  // 优先读取props
  if (key in props) return props[key]
  // 再读取组件实例上的属性（包括局部响应式变量、计算属性等）
  if (proxy && key in proxy) return proxy[key]
  // 无匹配时返回undefined
  return undefined
}
</script>

<template>
  <p>{{ $property('foo') }}</p>
  <p>{{ $property('baz') }}</p>
</template>

方案二：使用选项式API #

如果仍习惯Vue2的选项式写法，Vue3中可以直接在计算属性内封装函数，注意优先处理props：

<script>
export default {
  props: ['baz'],
  data() {
    return {
      foo: 'data中的值'
    }
  },
  computed: {
    $property() {
      return (key) => {
        // 优先读取props，避免和data属性重名覆盖
        if (key in this.$props) return this.$props[key]
        return this[key]
      }
    }
  }
}
</script>

<template>
  <p>{{ $property('foo') }}</p>
  <p>{{ $property('baz') }}</p>
</template>

错误原因说明 #

1. 原setup写法中，computed()返回的是Ref对象，模板中直接调用$property('foo')实际是操作Ref包装对象，而非内部函数，因此触发“不是函数”的类型错误。
2. setup语法中不存在Vue2式的组件实例this，直接使用this[name]会指向undefined，导致函数执行异常。

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