Question

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

Answer 1

似乎您应该将公用组件作为道具信息来提供有关其呈现内容的信息。这意味着您将在父级中对api进行调用，然后使您的孩子成为“哑巴”组件。在您的情况下，您应该在cardCascade中调用api，然后将一个ID作为props传递到您的singleBlog组件中。尽管就您而言，我根本看不到您在父级中使用此组件，但是它在哪里？

Answer 2

就像迈克尔说的那样，正确的方法是制作道具并从路由器接收道具。然后，当您进行申请时，您将传递此prop id。您可以在此处了解有关道具的更多信息：https://vuejs.org/v2/guide/components-props.html

将Vue组件用于多个模板

2 个答案: