定义 Vue 2.x 组件的类型答案

【问题标题】：Defining types of Vue 2.x components定义 Vue 2.x 组件的类型
【发布时间】：2021-11-15 04:56:00
【问题描述】：

我在我的项目中使用 Vue 2.6

我想为特定情况定义组件的 props（用于传递 props 的子组件中的动态组件）

这里是一些示例代码

// child component

<template>
  <component :is="someProp.passedComponent" />
</template>

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
 name: 'SomeComponent'
})
export default class SomeComponent extends Vue {
  @Prop() readonly someProp!: { passedComponent: Vue }
}

// parent component

<template>
  <some-component :some-prop="someDataForProp">
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import DummyComponent from './components/DummyComponent.vue'

@Component({
 name: 'ParentComponent'
})
export default class ParentComponent extends Vue {
  private someDataForProp = { passedComponent: DummyComponent }
}
</script>

// DummyComponent.vue

<template>
 <div>{{ title }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'DummyComponent'
})
export default class DummyComponent extends Vue {
  private title = 'This is dummy component for example'
} 
</script>

但是当我将组件类型定义为Vue 时，会出现这样的错误

“typeof DummyComponent”类型缺少“Vue”类型的以下属性：$el、$options、$parent、$root 和另外 39 个。

我想知道是否有一个类型可以包含所有用@Component 定义的组件。

【问题讨论】：

someData 究竟应该是什么样子？ passComponent 真的是一个属性吗？ DummyComponent 是如何定义的？
@EstusFlask 我为声明性示例添加了DummyComponent.vue 的定义someDataForProp 是传递给子组件的数据，因为子组件需要一个用于渲染具有组件绑定的动态组件的组件

标签： vue.js vuejs2

【解决方案1】：

passedComponent应该是组件本身，使用<component>，而Vue类型指的是Vue组件实例，即组件引用。

应该是：

@Prop() readonly someProp!: { passedComponent: typeof Vue }

【讨论】：