定义Vue 2.x组件的类型

Question

我在我的项目中使用Vue 2.6

我想为特定情况定义组件的道具(用于带有传递道具的子组件中的动态组件)。

下面是一些示例代码

// 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时，会产生如下错误

类型‘Type 39’缺少‘Vue’类型中的下列属性：$el、$options、$parent、$root和其他39种属性。

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

Answer 1

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

它应该是：

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