动态组件在 vue 的打字稿中不起作用答案

【问题标题】：Dynamic Components don't work in typescript in vue动态组件在 vue 的打字稿中不起作用
【发布时间】：2018-09-19 11:49:50
【问题描述】：

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

【问题讨论】：

因为动态组件需要来自data、props 或computed 的变量。最有可能data。所以像data() { return { component: "Hello" } }
它工作。非常感谢你。
@A.Lau 你应该把你的评论作为答案。
如果我可以对此添加一个问题：您如何键入动态组件？是Vue 实例吗？

标签： typescript vue.js

【解决方案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 之类的数据属性，但关键是要使其动态化，对，所以我在这里使用了计算出来的属性

【讨论】：

【解决方案2】：

:is 需要一个变量。你传递了一个字符串。进行语法更改，它应该可以工作

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

【讨论】：