Vue.js 属性或方法“；职位；未在实例上定义，但在渲染期间引用

我试图复制vue教程示例（在此处找到：），但没有成功。下面是我的代码。我有一个名为TA.vue的视图，我想将组件导入其中并进行渲染。你知道我做错了什么吗

TA.vue（视图）：

从“../components/blog\u post”//导入标题组件导入blog\u post
导出默认值{
名称：“人才收购”，
组成部分：{
博文
}
}

博客文章组件：

Vue.component('blog_post', {
    el: '#front',
    
    data() {
        return {
            posts: [
                { id: 1, title: 'My journey with Vue'},
                { id: 2, title: 'Blogging with Vue'},
                { id: 3, title: 'Why Vue is so fun'}
            ]
        }
    },
  props: ['title'],
  template: `
    <div class="blog_post">
      <h4>{{ title }}</h4>
    </div>
  `
})

app.mount('#blog-posts-events-demo')

Vue.component('blog_post', {
    el: '#front',
  props: ['title'],
  template: `
    <div class="blog_post">
      <h4>{{ title }}</h4>
    </div>
  `
})

app.mount('#blog-posts-events-demo')

Vue.component（'blog_post'{
el:'前方'，
数据（）{
返回{
职位：[
{id:1，标题：'我与Vue的旅程'}，
{id:2，标题：'用Vue写博客'}，
{id:3，标题：“为什么Vue如此有趣”}
]
}
},
道具：['title']，
模板：`
{{title}}
`
})
app.mount（“#博客帖子事件演示”）

编辑： 在遵循Amaarrockz的建议后，我有以下错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <BlogPost> at src/components/blog_post.vue
       <TalentAcquisition>
         <App> at src/App.vue
           <Root>

vue.runtime.esm.js？2b0e:619[vue warn]：未能装载组件：未定义模板或呈现函数。
发现于
--->在src/components/blog_post.vue
在src/App.vue

问题是您在子组件（“blog_post”）中定义了数组“posts”，您正试图从父组件迭代该数组。 更好的实现是在父组件中定义数组。 请查看下面的修改

塔维

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

从“../components/blog\u post”//导入标题组件导入blog\u post
导出默认值{
名称：“人才收购”，
组成部分：{
博文
},
数据（）{
返回{
职位：[
{id:1，标题：'我与Vue的旅程'}，
{id:2，标题：'用Vue写博客'}，
{id:3，标题：“为什么Vue如此有趣”}
]
}
},
}

博客文章组件：

Vue.component('blog_post', {
    el: '#front',
    
    data() {
        return {
            posts: [
                { id: 1, title: 'My journey with Vue'},
                { id: 2, title: 'Blogging with Vue'},
                { id: 3, title: 'Why Vue is so fun'}
            ]
        }
    },
  props: ['title'],
  template: `
    <div class="blog_post">
      <h4>{{ title }}</h4>
    </div>
  `
})

app.mount('#blog-posts-events-demo')

Vue.component('blog_post', {
    el: '#front',
  props: ['title'],
  template: `
    <div class="blog_post">
      <h4>{{ title }}</h4>
    </div>
  `
})

app.mount('#blog-posts-events-demo')

Vue.component（'blog_post'{
el:'前方'，
道具：['title']，
模板：`
{{title}}
`
})
app.mount（“#博客帖子事件演示”）

谢谢，我现在收到一个新错误，我已经编辑了原来的问题，你能检查一下吗请我在qsn中没有看到你的更新，它仍然保持不变我猜你没有保存你的编辑对不起，我在编辑之前写了评论，现在请查看此链接，看看这是否有帮助。。