[英]Assigning a Template to a Vue Class Component
How does one assign a template to a Vue class component directly? 如何直接将模板分配给Vue类组件? In the example below, I can render the subcomponent as a node, but never renders the template.
在下面的示例中,我可以将子组件渲染为节点,但从不渲染模板。 I've tried to assign the template many different ways to get it to render, but nothing seems to work:
我试图给模板分配许多不同的方法来渲染它,但似乎没有任何工作:
<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>
Note I'm also having the same issue if I use a Vue.component directly: 注意如果我直接使用Vue.component,我也会遇到同样的问题:
Vue.component('Subcomponent', {
props: ['item'],
template: '<span>{{item}}</span>'
})
Looks like your code is ok. 看起来你的代码还可以。 Check that you are using fresh versions of packages and your configs.
检查您是否使用了新版本的软件包和配置。
I've just created new project with 我刚刚创建了新项目
vue init ducksoupdev/vue-webpack-typescript my-project
After integrating your code to newly created project, I've realized that all is working correctly: 在将代码集成到新创建的项目之后,我意识到所有代码都正常工作:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.