Vue3+TypeScript中如何通过字符串索引访问this变量？

问题根源 #

你尝试用keyof CreateComponentPublicInstance断言变量，但这个类型只包含Vue内置的实例属性/方法（比如$emit、$data），不包含你自定义的signIn、signOut这类方法，所以TS会判定这些key不存在，导致类型错误。

针对不同API风格的解决方案 #

1. 选项式API场景 #

如果你的组件用选项式API编写，直接基于组件自身的实例类型来限定参数即可：

<script lang="ts">
import { defineComponent } from 'vue'

// 先定义组件
const AuthComponent = defineComponent({
  methods: {
    signIn() {
      // 你的登录弹窗逻辑
    },
    signOut() {
      // 你的登出弹窗逻辑
    },
    toggleDialog(dialogName: keyof InstanceType<typeof AuthComponent>) {
      // 先判断目标属性是否为方法，避免类型风险
      if (typeof this[dialogName] === 'function') {
        (this[dialogName] as () => void)()
      }
    }
  }
})

export default AuthComponent
</script>

如果需要更精准的类型限定（只允许方法名），可以手动定义方法类型：

type DialogMethods = 'signIn' | 'signOut'

// 然后在toggleDialog里直接用这个类型
toggleDialog(dialogName: DialogMethods) {
  this[dialogName]()
}

2. 组合式API（