vue小问题

vue中父组件向子组件传数据，父组件中的数据更新后，子组件中的数据更新并且重新调用使用该数据的方法

最近在做一个前端使用到vue的项目，写代码的过程中遇到了很多问题，现就“父组件向子组件传值，子组件数据得没有得到更新或者得到更新后没有调用子组件中的方法”这个问题提出一个解决办法。

解决办法:

一、是向子组件中添加两部分，一是props属性，另一个是监听函数

添加props属性

props:{
            questionList:{
                type: Array,
            },
        },

添加watch监听函数

watch: {
            questionList() {
            //监听到props中父组件的questionList值有变化时，调用子组件中的updatedChart函数。  
            this.updatedChart(); 
            },
        },

二、是向父组件中添加子组件的标签

 <total-income :questionList="this.questionList"/>

贴上一段的项目中的完整代码

子组件TotalIncome.vue

<template>
  <div id="total-income">
    <dv-charts id="chart_6" />
  </div>
</template>

<script>
    export default {
        name: 'TotalIncome',
        data() {
            return {
           //注意这里不要放从父组件获取到的数据，即questionList           
            }
        },
        props:{
            questionList:{
                type: Array,
            },
        },
        watch: {
            questionList() {
                this.updatedChart();
            },
        },
        methods: {
        //watch监听函数要监听到父组件数据改变，要调用的函数
            updatedChart() {
                var myChart = this.$echarts.init(document.getElementById('chart_6'));
                if(this.questionList.length > 0) {
                 //这里写具体函数
                 
                 }
             }
          }
      }
      </script>

父组件Draw.vue

<template>
<div>
<el-row>
          <el-col :span="24">
            <el-select v-model="projectId" @change="singleQuestionList" style="margin-left: 0px;" placeholder="请选择调查项目">
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        
  <total-income :questionList="this.questionList"/>
  
</div>
</template>

<script>
import TotalIncome from "./TotalIncome";
export default {
        components: {
            TotalIncome, 
        }, 
        data() {
            return {
                projectId: 1,
                questionList:[],
            }
        },
        methods:{
            singleQuestionList(){ 
            this.$api.reportDetail.single(this.projectId).then((res) => {
                if(res.data.length>0) {
                this.questionList = res.data; 
                }
            })
            .catch((error) => {
            console.log(error)
            });
            },
        },
    }
</script>

<style scoped>

</style>

有问题可以留言哦，可能回复不及时，见谅哦~