vueチュートリアルの例（ここにあります：https：//v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props）を複製しようとしていますが、成功しません。以下は私のコードです。TA.vueというビューがあり、コンポーネントをインポートしてレンダリングしたいと思います。私が間違っていることについて何か考えはありますか？
TA.vue（ビュー）：
<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コンポーネント：
Vue.component('blog_post', {
props: ['title'],
template: `
<div class="blog_post">
<h4>{{ title }}</h4>
</div>
`
})
app.mount('#blog-posts-events-demo')
完全なエラーメッセージ：
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>
あなたのblog_postファイルは、CDNの構文の代わりに、CLIの構文を使用しているので、部品を輸出されていません。さらに、まったく新しいVueアプリをマウントしようとします。
単一のファイルコンポーネントでVueCLIを使用しているため、すべてのコンポーネントはTA.vueコンポーネントと同様の形式である必要があります。したがってblog_post、次のようになります。
<template>
<div class="blog_post">
<h4>{{ title }}</h4>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加