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

Question

the Hello don't render in my HelloWorld page

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 warn in chrome Console

Answer 1

In short:

<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>

In addition to registering the Hello component, you need to return its instance from a computed property; you could probably assign it to a data property like private component: VueClass<Hello> = Hello , but the point is to make it dynamic, right, so I used the computed one here

Answer 2

:is requires a variable. you have passed a string. Make that syntax change and it should work

<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>