Question

我有一个父组件，例如。 parent.vue，我将props属性传递给子组件。

基本上，我正在使用vue-chartjs并将图表数据放在子组件中，并将其数据，标签和其他属性从父组件传递为道具。

在父组件中，单击按钮时，我分别有3个星期，月份，年份按钮，我正在更改图表数据，并将更改后的数据作为道具发送到子组件中。在父组件中而不是子组件中更改数据（在我控制台时）。那么，如何在单击时也更新子组件中数据的值？如果您需要一些代码，请告诉我。

父组件

   <button @click="changeBtn('euro')"></button>
   <button @click="changeBtn('pound')"></button>
   <tr v-for="(row,index) in selectedCurrency">
        <td>{{ index }}</td>
        <td>{{ row.desktop_name }}</td>                         
        <td>
          <div>
            <line-chart-shadow-v3
                :dataSet="row.data"
                :lineTension="0.5"
                :dataLabels="row.label"
                :width="50"
                :height="80"
            >
            </line-chart-shadow-v3>
          </div>
         </td>  
         <td>{{ row.data }}</td>    
   </tr>

//script part below

data () {
        return {
            selectedBtn: 'dollar',
            selectedCurrency: [],
            currencyList,
            }
         },
methods:(){
    mounted(){
        this.getSelectedCurrency();
    },
    methods: {
        getSelectedCurrency(){
            this.selectedCurrency = [];
            for (var i = 0; i < currencyList.length; i++){
                if(currencyList[i].tag == this.selectedBtn){
                    this.selectedCurrency.push(currencyList[i]);
                    console.log(this.selectedCurrency)
                }
          }
        },
      changeBtn(value){
            this.selectedBtn = value;
            this.getSelectedCurrency();
      }
}

子组件

...
props: {
        dataSet: {
            type: Array,
            default: () => [10, 30, 39, 65, 85, 10, 10]
        },
        lineTension: {
            type: Number,
            default: () => 0.4
        },
        dataLabels: {
            type: Array,
            default: () => ['A', 'B', 'C', 'D', 'E', 'F']
      },
    },



...
mounted() {
        let self=this;

        this.renderChart({
            labels: this.dataLabels,
            datasets: [{
               labels: this.label1,
                data: this.dataSet,
                lineTension: this.lineTension,
                borderColor: gradientColor,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointRadius: 0,
                pointHoverBorderWidth: 0,
                borderWidth: this.borderWidth,
                fill: false
            }]
        }, this.options)
        console.log(this.dataSet)
    }

如何从父组件动态更新子组件中的props值？

0 个答案: