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

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 之类的数据属性，但重点是使其动态化，对，所以我在这里使用了计算值

动态组件在Vue中的打字稿中不起作用

1 个答案: