Question

我整天试图找出如何将数据从一个组件传递到另一个组件。不幸的是，我已经阅读了很多相关的教程和说明。

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

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

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

这是我想要传递数据的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将会使您受益，因为它将使您的状态保持在应用程序级别（与将组件的每个组件状态保持在组件级别的组件 data 相对）。

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

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

为简化使用vue-router和vuex设置Vue应用程序的过程，您可以选择使用nuxt.js构建应用程序，该框架可轻松为您提供vue + vue-router + vuex。 Nuxt.js还将帮助设置服务器端呈现，如果您的应用要由搜索引擎索引，则这对SEO很有帮助。

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

1 个答案: