在父组件中更新数据后，子组件未从父组件接收道具

Question

我有一个名为 Report.vue 的模板，在该模板中我还有一个名为 dataSent:[] 的 data() 属性。在上述模板中，我调用了组件 BarChart，我试图将包含 dataSent[1,2,3,4,5...] 等更新元素的 dataSent 数组传递给组件 (BarChart)，以便它可以显示图形。但是，当我将 console.log 添加到 BarChart 时，它永远不会收到更新的道具。我怀疑它与事件有某种关系，但由于我是新手，还没有完全理解它是如何工作的，想知道我是否能得到一些帮助

由于 dataSent:[] 被初始化为一个空数组，因此 BarChart 组件从一开始就没有显示任何内容，但是后来，我创建了一个方法（在方法部分），称为 updateData ()，它显式地用 [12, 19, 3, 5, 2,8] 填充 dataSent。当然，我正在使用绑定到绑定到 dataSent 数组的组件条形图（这个称为数据）的道具。最后，在 html 部分，一个名为 GPSelect 的组件中的 @input 事件是它应该触发更改（更新 dataSent 数组）的事件，但是，如前所述，确实发生在父级（Report.vue)，但不在子组件 (BarChart) 中。

Report.vue

<v-flex lg4 sm12 xs12>
            <div class="selectOptions">
                <GPSelect 
                    @input="listSessions" 
                    v-model="programSelected" 
                    :items="programs" 
                    label="Programs" 
                    :disabled="programs === undefined || programs.length === 0" 
                />
            </div>
        </v-flex>

        <BarChart
                :label="label"
                :data="dataSent"
                :labels="labels"       
        />

data() {
        return {

            treatments: [],
            programs: [],
            programSelected: "",
            dataSent: [],
            label: "Number of sessions",
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
        }
    },

    methods: {

        async listSessions() {
         /*...some other sentences irrelevant */

            this.updateData();
        },

   updateData() {
            this.dataSent=[12, 19, 3, 5, 2,8];
            return this.dataSent;
        },

BarChart.vue

<template>
<div class="chart-container">
    <canvas id="barChart" ref="barChart">

    </canvas>
</div>
</template>

<script>
import Chart from "chart.js";

export default {

    props: {
        labels: Array,
        colors: Array,
        data: Array,
        label: ""
    },
    mounted() {

        this.displayChart();
    },
    methods: {
        displayChart() {
            console.log(this.data);
}

}

我希望 Barchart 的 console.log 显示从父组件 Report.vue 发送的更新后的数组（收到的 this.data），但目前它显示 [__ob__: Observer]

Answer 1

BarChart.vue

<template>
  <div class="chart-container">
    <canvas id="barChart" ref="barChart" />
  </div>
</template>

<script>
import Chart from "chart.js";

export default {
  props: {
    labels: Array,
    colors: Array,
    data: Array,
    label: ""
  },
  mounted() {
    this.displayChart();
  },
  watch: {
    'data': 'displayChart'
  },
  methods: {
    displayChart() {
      console.log(this.data);
    }
  }
}

试试这个:))

在父组件中更新数据后，子组件未从父组件接收道具

Child component not receiving props from parent after data is updated in parent

vue.js

events

components

updates

vue-props