Question

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

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

有没有办法做到这一点？我读到了道具：[]在子组件中动态使用数据。

关注我的概述部分.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

在Vuefiles / Vuecomponents之间传递数据

1 个答案: