文章目錄

实现文章列表时,写了如下组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const axios = require('axios');
var ComponentBlog = {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>

<div v-html="post.content"></div>
</div>
`
}
export default {
components: {
'blog-post': ComponentBlog
},

但是希望组件能够在其它页面复用,于是放在一个文件中,然后导入进来。在这里,我放在BlogPost.vue中,文件内容如下

1
2
3
4
5
6
<template>
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
</template>

然后编写如下代码使用组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
<div>
<blog-post v-for="post in posts" :key="post.id" :post="post"></blog-post>
</div>
</template>

<script>
import BlogPost from '@/components/BlogPost'
const axios = require('axios');
export default {
components: {
BlogPost
},
data () {
return {
posts: [],
}
},
created() {
this.fetchPost();
},
methods: {
fetchPost() {
axios.get('http://127.0.0.1:7001/api/blog/posts/')
.then(response => {
console.log(response)
console.log(this)
this.posts = response.data.results
})
.catch(error => {
// handle error
console.log(error);
})
}
}
}
</script>

但是一直报post是未定义的。问过同事后,才知道在Vue文档中,有介绍单文件组件的使用方法。于是将BlogPost.vue改成如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
</template>

<script type="text/javascript">

export default{
props: {
post: Object
},
data(){
return {
}
},
created(){
},
methods: {
},
}
</script>

这样之后,组件就可以正常使用了。

文章目錄