指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

vue3下使用ref调用子组件方法的时候对ts类型的判断:

//paraernt.vue下调用子组件 UserDashboardEventSeriesTable.vue

const eventSeriesTable = ref<InstanceType<
  typeof UserDashboardEventSeriesTable
> | null>(null);

<UserDashboardEventSeriesTable
        ref="eventSeriesTable"
        :query-content="search"
      />
对于 eventSeriesTable 这个常量,我开始是这样定义类型的:
interface ChildComponentMethod {
  getEventSeriesItems: () => void;
}

然后:
const eventSeriesTable = ref<ChildComponentMethod | null>(null);

但是后来,发现可以直接通过 typeof 获取组件类型,当然为了更安全,可以通过 InstanceType 实现

官方文档:https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs