在 Vuefiles/Vue 组件之间传递数据

Question

我尝试用一​​些图表和表格在 vue2.js 中创建一些管理面板。

在我的 overview.vue（包含所有内容的页面，如图表，...）中，我通过 axios.get 调用从后端收集了一些数据。我想在其他 vue 组件中使用相同的数据，例如 pieChart.js 或 vueTabels.vue。

有没有办法做到这一点？我阅读了关于 props: [] 在子组件中动态使用数据的信息。

关注我的overview.vue的一部分：

  <h2>Groups overview</h2> 
  <div v-if="groupCount > 0">
    <li v-for="group in groups">
      <p><b>Group name:</b> {{group.name}}, <b>Group id:</b> {{group.groupId}}</p>

<pie-chart></pie-chart>

<script>
import Mixins from "../mixins.js";
import axios from "axios";
import Cookie from "../js/Cookie.js";
import Config from "../js/Config.js";

import PieChart from "@/components/PieChart.js";

export default {
  name: "overview",
  mixins: [Mixins],
  components: {
    PieCount,
  },
  data() {
    return {
      groups: [],
      groupCount: "",

    };
  },

>   mounted: function() {
>     this.groups = []
>     this.getGroups();
> 
>   methods: {

>     getGroups: function() {
>       axios
>         .get(Config.URL +"groups", {
>         })
>         .then(response => {
>           this.groups = response.data.payload;
>           this.groupCount = this.groups.length;
>         })
>         .catch(e => {
>           this.errors.push(e);
>         });
>     },

我希望在其他组件中动态拥有的数据 groupCount 和 groups[]，例如 PieChart.js。

PieCount.js 的截图：

import { Pie } from 'vue-chartjs';
import axios from "axios";
import Cookie from "../js/Cookie.js";
import Config from "../js/Config.js";

export default Pie.extend({
name: "PieChart",
props: ['groupCount', 'groups']


data() {
    return {
        options: {

        }
    }
},

mounted: function() {

this.renderChart({
                labels: ['Group', "Groups"],
                datasets: [{
                    backgroundColor: ['#FC2525', '#05CBE1'],
                    data: [groups, groupCount]
                }, ],
            }, { responsive: true, maintainAspectRatio: false }, )

如果我这样做，我的 PieChart.js 中的数据组和 groupCount 总是未定义的。

有没有人在 js-Files 或 VueComponents 之间传递数据的解决方案？到目前为止，我解决此问题的方法是在我的 PieChart.js 中执行相同的 axios 请求和数据获取，但我希望有另一种解决方案。

Answer 1

您需要在模板中向下传递道具

<pie-chart :groupCount="groupCount" :groups="groups"></pie-chart>

https://vuejs.org/v2/guide/components.html#Dynamic-Props