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

最新推荐文章于 2022-11-30 18:45:41 发布

Koyanagi小柳

最新推荐文章于 2022-11-30 18:45:41 发布

阅读量688

点赞数 2

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/junior_liu/article/details/112919554

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文讨论了在Vue开发中如何将后端动态获取的数据传递给子组件，并处理子组件无法及时更新数据的问题。通过在子组件中监听父组件传递的data变化，可以确保在数据更新时重新初始化图表。此案例适用于需要实时响应父组件数据变化的场景。

摘要由CSDN通过智能技术生成

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

例如：

父组件

<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);
    }
}