將模板分配給Vue類組件

Question

如何直接將模板分配給Vue類組件？ 在下面的示例中，我可以將子組件渲染為節點，但從不渲染模板。 我試圖給模板分配許多不同的方法來渲染它，但似乎沒有任何工作：

<template>
  <div>
    <p>This should render one, two, three below twice.</p>
    <div v-for="item in items" :key="item">
      {{ item }}
      <Subcomponent :item="item" />
    </div>
  </div>
</template>

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

  @Component({ template:`<span>{{item}}</span>` })
  class Subcomponent extends Vue {
    template = `<span>{{ item }}</span>`
    @Prop({required: true})
    item: string
  }

  @Component({ components: { Subcomponent } })
  export default class Test extends Vue {
    items = ['one', 'two', 'three']
  }
</script>

注意如果我直接使用Vue.component，我也會遇到同樣的問題：

Vue.component('Subcomponent', {
  props: ['item'],
  template: '<span>{{item}}</span>'
})

Answer 1

看起來你的代碼還可以。 檢查您是否使用了新版本的軟件包和配置。

我剛剛創建了新項目

vue init ducksoupdev/vue-webpack-typescript my-project

在將代碼集成到新創建的項目之后，我意識到所有代碼都正常工作：

<div><p>This should render one, two, three below twice.</p> <div>
      one
      <span>one</span></div><div>
      two
      <span>two</span></div><div>
      three
      <span>three</span></div></div>