VUEJS同胞组件数据通过方法传递

Question

我有一个vuejs laravel页面，上面有父母，

我的父模板中有

<template>
<div>
    <h4>DATA ANALYSIS</h4>
    <dataAnalysisGraph />
    <br>
    <hr>
    <dataAnalysisTable />
</div>  

2个孩子，在我的dataAnalissisgraph子组件中，我有一种方法，每次下拉下订单更改时都会发送请求。

    //dataAnalysisGraph 
    <template> 
          <div>
              <div> 
                <select class="form-control select" name="" @change="GenerateChart" v-model='chartType' >
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
            
                </select>
              </div>
          
            <br><br><br>
              <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
          </div>
        </template>
    <script>
export default {
    data() {
        return {
        data: [],
        }
    },
    methods: {
        GenerateChart(){
            this.axios
                .get('api/'+this.chartType)
                .then(response => {
                    this.data = response.data;
                   
            });
        },
    },
    created() {
        this.GenerateChart();
    },      
};
</script>

在我的DataAnalysistist of子组件中。我想从dataAnalysisgraph组件中获取this.data，并将其传递给DataAnalysistsist，并每次下拉列表形式dataAnalissisgraph组件更改时都会对其进行更新。

这是我当前可数据的可及组件

<template>
    <div>
        {{data}}
    </div>
    
</template>
<script>
export default {
    data() {
        return {
        data: [],
        };
    },
    methods: {
        
    },
    created() {
       
    },      
};
</script>

Answer 1

您可以在DataAnalysisgraph内部发出一个事件，将this.data返回到父，并使用V-Model将此值连接到DataAnalysistable的组件。您可以阅读更多在VUEJS指南中在“使用V-Model”的“使用”中，部分。