vue.js - 为多个模板使用一个 Vue 组件
问题描述
我对 Vue 还很陌生,我什至不确定我是否正确地表达了我的问题。这是我想要实现的目标。我正在使用引导程序中的卡级联,每张卡都显示为博客文章的一部分。每张卡片都有一个指向整个博客网页的链接。
为了尝试实现这一点,我有两个 vue 文件。cardCascade.vue 和 singleBlog.vue。我的问题是目前我必须为我拥有的每个博客创建一个不同的 singleBlog.vue 文件。
例如,假设我的数据库中有两篇博客文章。cardCascade.vue 还将有两个指向各个博客文章的链接。博文 1 将使用 singleBlog1.vue,博文 2 将使用 singleBlog2.vue
我该怎么做才能更有效地实现这一点,这样我只需要一个 singleBlog.vue,它会根据我从 cardCascade.vue 中选择的链接动态调整内容?
我现在拥有的部分 cardCascade.vue
<b-card v-for="blog in blogs_duplicate" title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
<b-card-text>
<!--{{getBlogOfType("Vue",blog.id)}}-->
{{getBlogOfType("Vue",blog.id)}}
</b-card-text>
<b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
</b-card>
以下是我现在为 singleBlog.vue 提供的内容,请记住,现在它只是在列表中显示所有博客文章。
<template>
<div id="single-blog">
<ul>
<article>
<li v-for="blog in blogs" v-bind:key="blog.id">
<h1>{{blog.title}}</h1>
<i class="fa fa-cogs" aria-hidden="true"></i>
<router-link v-bind:to="{name:'datascience-single', params: {blog_id: blog.blog_id}}">
<p>{{blog.content}}</p>
</router-link>
</li>
</article>
</ul>
</div>
</template>
<script>
import db from './firebaseInit'
export default{
data(){
return{
id:this.$route.params.id,
blogs:[],
}
},
created(){
//this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
//this.blog = data.body;
db.collection('Blogs').orderBy('Type').get().then(querySnapshot =>{
querySnapshot.forEach(doc => {
//console.log(doc.data());
const data={
'id': doc.id,
'content': doc.data().Content,
'type': doc.data().Type,
'title': doc.data().Title,
'blog_id':doc.data().blog_id,
}
this.blogs.push(data)
})
})
}
}
</script>
解决方案
似乎您应该将通用组件作为道具提供有关其呈现内容的信息。这意味着您将调用父级中的 api,然后使您的子级成为“哑”组件。在您的情况下,您应该调用 cardCascade 中的 api,然后将 id 作为道具传递给您的 singleBlog 组件。尽管在您的情况下,我根本看不到您在父级中使用此组件,但它在哪里?
推荐阅读
- c# - NEST - MultiMatch 在术语为空时搜索所有文档 - Elasticsearch 6.4
- vba - Outlook 保存后删除电子邮件
- c# - 如何使表单事件利用异步的好处?
- typescript - TypeError:尝试为特定用户进行更改时尝试分配给只读属性
- excel - 如何匹配 VBA 正则表达式中的所有标点符号(例如其他语言中的 '\p{P}')
- angular - Angular 2 - 将字符串与其他字符串一起翻译为参数
- java - 使用最后创建的文件
- reactjs - 运行流程:安装给出错误
- mysql - 如何删除所有类型为 y 的行,这些行也包含同一个表中类型为 x 的条目?
- symfony - KnpSnappyBundle - wkhtmltopdf:加载 CSS/图像但不加载脚本