vue 父组件传动态数据给子组件问题

在开发中，有时会遇到 将一个从后端动态获取的数据传到子组件去操作的需求。

例如：

父组件

<div class="chart-wrapper">
    <pie-chart :title="title1" :data="attendanceData"/>
</div>

getAttendance() {
    getAttendance(this.query).then(response => {
        this.attendanceData = response.data;
    });
}

在父组件会随着点击不同的按钮等，设置不同的query，多次触发getAttendance()，数据attendanceData跟着多次改变。

子组件

props: {
    title: {
      type: String,
      default: 'Pipe'
    },
    data: {
      type: Array,
      default: () => [
        { value: 320, name: 'Industries' },
        { value: 240, name: 'Technology' },
        { value: 149, name: 'Forex' },
        { value: 100, name: 'Gold' },
        { value: 59, name: 'Forecasts' }
      ]
    }
},
methods: {
    initChart() {
        console.log(this.data);
    }
}

这时，随着父组件点击不同的按钮，传递不同的data到子组件，这种情况下，你会发现方法initChart中是取不到父组件传过来的data的，或者取到的一直是默认值。

我们可以在子组件监听data的变化

data() {
  return {
    newData: []
  }
},
watch : {
   'data': function(newVal,oldVal) {
       this.newData = newVal;
       this.initChart();
    }
},
methods: {
    initChart() {
        console.log(this.data);
    }
}

如果父组件传的是个固定不变的值，如title1，子组件就不需要监听。