Javascript Vue.js父级don'；t将更新的数据发送给子系统

我无法从父级更新子级中的数据。父级只发送初始数据，但若我按函数更新数据，那个么我从后端获取数据，并没有任何更改。我甚至制作了wacher，它可以工作，然后更改数据（在控制台中编写调试字），但仍然不发送更新的数据。如何使用动态更改的数据从父数据刷新子数据

家长：

<el-date-picker
    v-model="reportMonth"
    type="month"
    format="MMMM yyyy"
    value-format="yyyy-MM-dd"
    placeholder="Choose month"
    @change="generateReport">
  </el-date-picker>

<bar-chart :parent-data="sendData"></bar-chart>

data() {
    return {
      monthData: null,
      sendData: {
        lowRiskPreliminary: 0,
        midRiskPreliminary: 0,
        highRiskPreliminary: 0,
        inadmissibleRiskPreliminary: 0,
        notValidPreliminary: 0
      }


watch: {
    monthData: function() {
      console.log('data changed!')
      this.sendData = this.monthData
    }
  },
  methods: {
    generateReport() {
      this.listLoading = true
      getMonthlyReport(this.reportMonth).then(response => {
        this.monthData = response.data }

数据（）{
返回{
monthData:null，
发送数据：{
低风险：0，
中期预测：0，
高风险：0，
不可受理风险：0，
NotValidPriminary:0
}
观察：{
monthData:function（）{
console.log（'数据已更改！'）
this.sendData=this.monthData
}
},
方法：{
generateReport（）{
this.listLoading=true
getMonthlyReport（this.reportMonth）。然后（response=>{
this.monthData=response.data}

儿童：

<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    parentData: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      chart: null,
      lowRisk: [this.parentData.lowRiskPreliminary],
      midRisk: [this.parentData.midRiskPreliminary],
      highRisk: [this.parentData.highRiskPreliminary],
      inhRish: [this.parentData.inadmissibleRiskPreliminary],
      notVal: [this.parentData.notValidPreliminary]
    }
  },
  mounted() {
    this.initChart()

methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.chart.setOption({

导出默认值{
道具：{
类名：{
类型：字符串，
默认值：“图表”
},
宽度：{
类型：字符串，
默认值：“100%”
},
高度：{
类型：字符串，
默认值：“300px”
},
父数据：{
类型：对象，
默认值：未定义
}
},
数据（）{
返回{
图表：空，
lowRisk:[this.parentData.LowRiskPremium]，
midRisk:[this.parentData.MidRiskPremium]，
高风险：[this.parentData.highriskPremium]，
inhRish:[this.parentData.unadmissibleRisk]，
notVal:[这个.parentData.NotValidPriminary]
}
},
安装的（）{
this.initChart（）
方法：{
initChart（）{
this.chart=echart.init（this.$el）
this.chart.setOption({

像这样在子模板{{sendData}中打印sendData，您应该会看到它的变化。

parentData的默认值是primitive value

未定义的

，更新父变量后您会将其更改为object。有关VueJS中的反应性和注意事项的更多信息：

使用

$nextTick

：

watch: {
     monthData: function() {
       this.$nextTick(function () {
           this.sendData = this.monthData
       })
    }
}

或使用$emit从父级发出事件：

watch: {
    monthData: function() {

           this.$emit('monthDataUpdated', this.monthData);
    }
}

儿童：

events: {
   'monthDataUpdated' : function(data){
     this.$nextTick(function () {
       this.parentData = data;
     });
   },
}

---

感谢您的帮助！但它不起作用，我想我知道原因。数据中的问题，从后端异步获取。甚至是console.log（'data in event passed'，this.parentData）对事件不做任何操作。我只是尝试将其用于日期选择器。并成功地将数据从父级发送到子级，但在子级中我使用了另一个监视程序。将尝试对后端的异步数据执行某些操作。Hoooraay！它正在处理异步数据，但需要使用两个监视程序。第一个在父级，第二个在子级。再次感谢兄弟！