使用<script setup lang="ts">无法访问Vue3方法的解决方案咨询

问题原因 #

<script setup lang="ts">是Vue3提供的语法糖，默认情况下，里面声明的变量、方法都是组件内部私有成员，不会自动挂载到Vue实例上供外部访问。而传统defineComponent写法中，选项式的methods会自动挂载到实例原型上，所以外部能直接调用。你遇到的报错，本质就是因为<script setup>没有显式暴露someMethodOnFoo，导致非Vue类访问实例时找不到这个方法，TypeScript也无法识别该成员。你的推测是对的，核心就是defineExpose的使用问题。

解决方案 #

要让非Vue类能调用到Vue组件的方法，需要在<script setup>里显式用defineExpose暴露目标方法，同时给实例补充类型声明（TypeScript环境下必填）：

1. 在Vue组件中暴露方法 #

// Foo.vue
<script setup lang="ts">
import { defineExpose } from 'vue'

const someMethodOnFoo = () => {
  // 你的方法逻辑，比如操作Chrome扩展API
  console.log('执行someMethodOnFoo')
}

// 显式暴露需要外部访问的方法
defineExpose({
  someMethodOnFoo
})
</script>

2. 给非Vue类的实例参数补充类型 #

TypeScript默认不知道你暴露的成员，需要手动定义组件实例的类型：

// BarClass.ts
import type FooComponent from './Foo.vue'

// 定义组件实例的类型，包含暴露的方法
type FooInstance = InstanceType<typeof FooComponent> & {
  someMethodOnFoo: () => void
}

class BarClass {
  private fooInstance: FooInstance

  constructor(instance: FooInstance) {
    this.fooInstance = instance
  }

  triggerFooMethod() {
    // 现在可以正常调用，TypeScript也不会报错
    this.fooInstance.someMethodOnFoo()
  }
}

3. 挂载组件时传递实例 #

在初始化Vue组件并注入到BarClass时，确保拿到的是正确的实例：

// 比如在Chrome扩展的background或content脚本中
import { createApp } from 'vue'
import Foo from './Foo.vue'

const app = createApp(Foo)
const fooInstance = app.mount('#app') as FooInstance

const bar = new BarClass(fooInstance)
bar.triggerFooMethod()

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