動態組件在 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 ，但重點是讓它動態，對，所以我在這里使用了計算的

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