为多个模板使用一个 Vue 组件答案

【问题标题】：Use a Vue component for multiple templates为多个模板使用一个 Vue 组件
【发布时间】：2023-04-10 04:54:01
【问题描述】：

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

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

似乎您应该将通用组件作为道具提供有关其呈现内容的信息。这意味着您将调用父级中的 api，然后使您的子级成为“哑”组件。在您的情况下，您应该调用 cardCascade 中的 api，然后将 id 作为道具传递给您的 singleBlog 组件。尽管在您的情况下，我根本看不到您在父级中使用此组件，但它在哪里？

【讨论】：

【解决方案2】：

就像迈克尔说的那样，正确的做法是制作一个道具并从您的路由器接收该道具。然后，当您提出申请时，您将传递此道具 ID。你可以在这里阅读更多关于道具的信息：https://vuejs.org/v2/guide/components-props.html

【讨论】：