动态组件在 vue 的 typescript 中不起作用

Question

Hello 未在我的 HelloWorld 页面中呈现

HelloWorld.vue

<template>
  <div>
      <component :is="Hello"></component>
  </div>
</template>

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

@Component({
  components: {
  Hello
  }
  })
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

Vue 在 chrome 控制台中发出警告

Answer 1

简而言之：

<template>
  <div>
      <component :is="Hello"></component>
  </div>
</template>

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

@Component({
  components: {Hello}
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  
  private get component(): VueClass<Hello> {
    return Hello;
  }
}
</script>

除了注册Hello组件之外，您还需要从计算属性返回其实例；您可能可以将其分配给诸如 之类的数据属性private component: VueClass<Hello> = Hello，但重点是使其动态，对吧，所以我在这里使用了计算的属性