Vue Вызов другого метода файла компонента

Я получил файл «PieChart.vue». С другой стороны, у меня есть другой файл с вызовом dashboard.vue, но я не могу вызвать функцию PieChart.vue -> genChart. Можно ли вызвать функцию? Я хочу обновить графики. Это связано с тем, что я использую вкладки vuetify, но vue chart js, похоже, не может отобразить диаграмму на вкладке vuetify. Для отображения диаграмм требуется повторный рендеринг. Любое решение для этого случая?

PieChart.vue:

<script>
import { Pie } from "vue-chartjs";

export default {
    extends: Pie,
    name: "v-PieChart",
    props: {
        data: Array,
        label: Array,
        color: Array,
    },
    watch: {
        data: function (newData, oldData) {
            this.debouncedGenChart();
        },
    },
    created: function () {
        this.debouncedGenChart = _.debounce(this.genChart, 500);
    },
    methods: {
        genChart: function () {
            this.renderChart(
                {
                    labels: this.label,
                    datasets: [
                        {
                            backgroundColor: this.color,
                            data: this.data,
                        },
                    ],
                },
                { responsive: true, maintainAspectRatio: false }
            );
        },
    },
};
</script>

Приборная панель.vue:

<v-tabs>
    <v-tab
        :href="`#tab-AM`"
        @click="$refs.leaveChartAM.genChart()"
    >AM</v-tab>
    <v-tab
        :href="`#tab-PM`"
        @click="$refs.leaveChartPM.genChart()"
    >PM</v-tab>
    <v-tab-item :value="'tab-AM'">
        <v-PieChart
            :data="charts.leave.data"
            :label="charts.leave.label"
            :color="['#00E676', '#66BB6A', '#AED581']"
            ref="leaveChartAM"
        ></v-PieChart>
    </v-tab-item>
    <v-tab-item :value="'tab-PM'">
        <v-PieChart
            :data="charts.leave.data"
            :label="charts.leave.label"
            :color="['#00E676', '#66BB6A', '#AED581']"
            ref="leaveChartPM"
        ></v-PieChart>
    </v-tab-item>
</v-tabs>

vue.js vuetify.js vue-chartjs
person Bryant Tang    schedule 24.09.2020    source источник
comment
Попробуйте использовать реквизит   -  person Pallav Chanana    schedule 24.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете реализовать собственное событие для вызова функций между компонентами. Я проиллюстрировал два метода, которые можно использовать для привязки функций событий и вызовов.

Способ 1

Сохраняйте отдельный экземпляр Vue только для регистрации пользовательского события. назначьте его окну, чтобы к нему можно было получить доступ из любого места

// Initiate
window.Notifier = new Vue();

// Bind event
window.Notifier.$on('regenPieChartMethod1', function(message){
    //code block
});

// Call event from any component
window.Notifier.$emit('regenPieChartMethod1', message);

Метод 2

Привязать событие к родительскому компоненту, чтобы к нему можно было получить доступ из дочерних компонентов

// Bind event
this.$parent.$on('regenPieChartMethod2', function(message){
    //code block
});

// Call event from child component
this.$parent.$emit('regenPieChartMethod2', message);

Вы можете использовать любой вариант, подходящий для вашей реализации

Полное решение

// Use a seperate Vue instance only for event
window.Notifier = new Vue();

Vue.component('dashboard', {
  methods: {
  
    callRegenPieChartMethod1 () {
    
      var message = 'Pie Chart data is regenerated using method 1';
        window.Notifier.$emit('regenPieChartMethod1', message);
    },
    
    callRegenPieChartMethod2 () {
    
      var message = 'Pie Chart data is regenerated using method 2';
      this.$parent.$emit('regenPieChartMethod2', message);
    }
  },
  template: '<div><h4>Dashboard Component</h4><button @click="callRegenPieChartMethod1">Refresh Pie Chart - Method 1</button> <button @click="callRegenPieChartMethod2">Refresh Pie Chart - Method 2</button></div>',
});


Vue.component('piechart', {
  data() {
    return {
      message: 'This is initial data of the pie chart!'
    };
  },
  mounted() {
    var _t = this;
    
    // use seperate Vue instance to bind event
    window.Notifier.$on('regenPieChartMethod1', function(message){
        _t.genChart(message);
    });
    
    // bind event to the parent
    this.$parent.$on('regenPieChartMethod2', function(message){
        _t.genChart(message);
    });
  },
  methods: {
    genChart (message) {
      this.message = message;
    }
  },
  template: '<div><h4>Pie Chart Component</h4> <p>Message : {{message}}</p></div>',
});

new Vue({
  el: '#app',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <dashboard></dashboard>
  <piechart></piechart>
</div>

person Chathuranga K    schedule 25.09.2020