无法安装组件:未定义模板或渲染函数.组件导入失败
我正在尝试复制 vue 教程示例(可在此处找到:https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props )，但没有成功.下面是我的代码.我有一个名为 TA.vue 的视图，我想将组件导入并渲染.任何想法我做错了什么?
TA.vue(视图):
<blog_postv-for=在帖子中发帖"；:key="post.id";:title="post.title";></blog_post></div></div></b 行></b-容器></模板><脚本>import blog_post from '../components/blog_post'//导入 Header 组件导出默认{name: '人才获取',组件: {博客帖子},数据() {返回 {帖子:[{ id: 1, title: '我的 Vue 之旅'},{ id: 2, title: '用 Vue 写博客'},{ id: 3, title: '为什么 Vue 如此有趣'}]}},}</脚本>blog_post 组件:
Vue.component('blog_post', {道具:['标题']，模板:`<div 类=blog_post"><h4>{{ 标题 }}</h4></div>`})app.mount('#blog-posts-events-demo')完整的错误信息:
vue.runtime.esm.js?2b0e:619 [Vue 警告]:无法挂载组件:未定义模板或渲染函数.在发现---><博文><人才获取>在 src/views/TA.vue<应用程序>在 src/App.vue<根>您的 blog_post 文件使用 CDN 语法而不是 CLI 语法，因此没有导出组件.此外，它会尝试安装一个全新的 Vue 应用程序.
由于您将 Vue CLI 与单个文件组件一起使用，因此您的所有组件都需要具有与 TA.vue 组件类似的格式.所以 blog_post 应该是这样的:
<template><div 类=blog_post"><h4>{{ 标题 }}</h4></div></模板><script>导出默认{道具:['标题']}</脚本>I am trying to replicate the vue tutorial example (found here: https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props ), but with no success. Below is my code. I have a view called TA.vue, that i would like to import the component into and render. Any ideas what I am doing wrong?
TA.vue (the view):
<template id="front">
<b-container style="margin-top: 9rem;">
<b-row>
<div id="blog-posts-events-demo" class="demo">
<div>
<blog_post
v-for="post in posts"
:key="post.id"
:title="post.title"
></blog_post>
</div>
</div>
</b-row>
</b-container>
</template>
<script>
import blog_post from '../components/blog_post' // import the Header component
export default {
name: 'talent-acquisition',
components: {
blog_post
},
data() {
return {
posts: [
{ id: 1, title: 'My journey with Vue'},
{ id: 2, title: 'Blogging with Vue'},
{ id: 3, title: 'Why Vue is so fun'}
]
}
},
}
</script>
blog_post component:
Vue.component('blog_post', {
props: ['title'],
template: `
<div class="blog_post">
<h4>{{ title }}</h4>
</div>
`
})
app.mount('#blog-posts-events-demo')
Full error message:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <BlogPost>
<TalentAcquisition> at src/views/TA.vue
<App> at src/App.vue
<Root>
解决方案
Your blog_post file is using CDN syntax instead of CLI syntax and so isn't exporting a component. Additionally, it tries to mount an entirely new Vue app.
Since you're using Vue CLI with single file components, all your components need to have a similar format to your TA.vue component. So blog_post should look like this:
<template>
<div class="blog_post">
<h4>{{ title }}</h4>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>
相关文章