javascript - 将 json 数据从一个组件传递到另一组件。 Vue.js

Question

我一整天都在尝试弄清楚如何将数据从一个组件传递到另一个组件。我已经阅读了很多相关的教程和说明，不幸的是没有运气。

我从 api 获取了一些数据，并将它们呈现在 home.vue 中 我想将数据传递到一个新文件中以生成一个页面，该页面将显示列表中的随机产品。

也许这种做法是完全错误的，但我是第一次使用vue组件，我对实例有经验

我正在尝试使用 props 来实现它，以将数据返回到新页面。

这是我想传递数据的 randomize.vue 文件

<template>
  <div class="hello">
    <p> {{ this.propsdata[0].e }} </p>
  <h1>dla;dl;djal;d</h1>
  </div>
</template>

<script>
export default {
  name: "randomize",
  props: ["propsdata"],
  data() {
    return {
        obj: this.propsdata
    };
  },
  mounted(){
   console.log(this.props);
  },
};
</script>

这是我获取数据的 home.vue 文件

<template>
  <div>
    <div class=" main-conte" >
                 <randomize  :propsData=toBeShown />

<transition-group name="fade" tag="div" id="container"  class=" row "  >
      <figure v-for="(value,index) in  toBeShownOrdered" id="page-wrap" :key="index" class="beer-container col-xs-6 col-sm-6 col-lg-4 col-xl-2"   >
         <a  >
    <img @click="goTodetail(value.id)" class="logo lazy img-responsive loaded" v-bind:src="getMissingImg(index)"/>
          <figcaption>
            <div class="beer-title">{{value.name}}</div>
            <div class="beer-availability"> {{value.tagline}}</div>
            <div class="learn-more">
              <h4 class="beer-info-title">Format</h4>
              <span class="serving-icons"></span>
              <div class="serving">
             <i v-if="value.abv >= 0 && value.abv <=6 " class="fas fa-wine-glass-alt"></i> 
             <i v-if="value.abv >= 6 && value.abv <=7" class="fas fa-glass-cheers"></i>
             <i v-if="value.abv >= 7 && value.abv <=100" class="fas fa-wine-bottle"></i>
             <span class="measure">{{value.abv}}</span>%</div>
             </div>
           </figcaption>
           </a>
     </figure>
     </transition-group>
<div class=prev-next>
<button @click="orderByName = !orderByName">Click Me!</button>

<button class="prev" @click="prevPage" :disabled="currentPage==1">
<i class="fas fa-angle-double-left"></i></button>
      <button class="next"  @click="nextPage" :disabled="currentPage == totalPages">
<i class="fas fa-angle-double-right"></i>     </button>
</div>
</div>
  <div>
  </div>
    </div>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
import FadeTransition from "./fade-transition.vue";

import randomize from "@/components/randomize";



export default {
  name: "home",

  components: {
    mdbView,
    mdbMask,
    FadeTransition,
    randomize
  },

  data() {
    return {
      items: [],
       message: '',
      currentPage: 1,
      orderByName: false,


 };
  },
  computed: {
    //show more less products
  	toBeShown() {
      return this.items.slice(0, this.currentPage * 5);

    },
    totalPages() {
      return Math.ceil( this.items.length / 4);
    },
    toBeShownOrdered() {
  return this.orderByName ? _.orderBy(this.toBeShown, 'name', 'asc') : this.toBeShown;
}
 },

  mounted() {
    this.fetchData();

    
  },
  


  methods: {
    fetchData: function() {
      const myRequest = new Request("https://api.punkapi.com/v2/beers");
      fetch(myRequest)
        .then(response => {
          return response.json();
        })
        .then(data => {
          this.items = data;

          console.log(this.items);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getMissingImg(index) {
      return this.images[index];
    },

   	nextPage(){
      if(this.currentPage <  this.totalPages) this.currentPage++;
    },
    prevPage(){
      this.currentPage = this.currentPage - 1 || 1;
    },
      goTodetail(prodId) {
    let proId=prodId
    this.$router.push({name:'blog',params:{Pid:proId}})
    
      },

index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import blog from '@/components/blog'
import randomize from '@/components/randomize'



Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      props:true
    },
    {
      path: '/blog/:Pid',
      name: 'blog',
      component: blog,
      props:true

    },
    {
      path: '/randomize/',
      name: 'randomize',
      component: randomize,
      props:true

    },
  ]
})

Answer 1

您将受益于使用 vuex因为它将您的状态保持在应用程序级别(与组件数据相反，它将每个组件状态保持在组件级别)。

设置 vuex 需要更多的工作，并且有一个学习曲线，但除非您不会将应用程序扩展到中/大尺寸，否则从长远来看，它会降低应用程序的整体复杂性，从而使您受益。

简而言之，应用程序中的所有组件都可以访问存储在 vuex 中的状态，而无需处理 props。从任何组件中，您都可以调度在 vuex 存储中实现的操作来更改 vuex 状态。 Vuex 将帮助您的组件专注于呈现数据和捕获用户操作。

为了轻松使用 vue-router 和 vuex 设置 Vue 应用程序，您可以选择使用 nuxt.js 构建您的应用程序这是一个轻松为您提供 vue+vue-router+vuex 的框架。 Nuxt.js 还将帮助设置服务器端渲染，如果您的应用程序要被搜索引擎索引，这将有利于 SEO。