javascript - 在 Vue 文件/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);
>         });
>     },

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

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

您需要在模板中传递 Prop

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

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