Vue调用另一个组件文件方法

如何解决Vue调用另一个组件文件方法

我得到了文件“ PieChart.vue”。另一方面，我还有另一个文件调用dashboard.vue，但无法调用PieChart.vue->“ genChart”函数。可以调用该函数吗？我想刷新图表。这是因为Im使用了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>

Dashboard.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','#AED581']"
            ref="leaveChartPM"
        ></v-PieChart>
    </v-tab-item>
</v-tabs>

解决方法

您可以实现一个自定义事件，以在组件之间调用函数。我已经说明了可以用来绑定事件和调用函数的两种方法。

方法1

---

保留Vue的单独实例，仅注册自定义事件。将其分配给窗口，以便可以从eveywhere进行访问

// 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>