覆盖组件方法 [英] Overriding a component method

问题描述

我正在使用 VueCharts ，它是Google图表vue插件.

I'm using VueCharts which is a Google Charts plugin for vue.

我正在尝试为图表提供较新的Material Design外观.我尝试将"google.charts.Bar"传递给图表类型的道具，它确实起作用了.但是，许多选项都会被忽略，因为如 Google图表文档，需要使用 google.charts.Bar.convertOptions(options)转换选项对象，而插件则无法执行此操作.

I'm trying to give the newer Material Design looks to the charts. I've tried passing "google.charts.Bar" to chart-type prop and it did work. However, many of the options are ignored because, as stated in the Google Charts docs, the options object needs to be converted by using google.charts.Bar.convertOptions(options), something the plugin doesn't do.

从源头上看，该插件安装了一个'vue-chart'组件.该组件使用 ChartWrapper 来处理图表库的加载，如下所示:

Looking at the source, the plugin installs a 'vue-chart' component. This component uses ChartWrapper to handle loading the chart libraries, like so:

methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: options,
        containerId: containerId
      })

      return wrapper
    },

因此，我所需要做的就是重写此方法，以在将选项传递给ChartWrapper之前将其转换.

So all I need is to override this method to convert the options before passing them to the ChartWrapper.

但是如何?我还没有找到一种方法来简单地在vue文档中覆盖组件方法.我可以创建一个新组件并向下传递转换后的选项，但是我需要访问google对象，该对象仅由插件在内部加载.

But how? I haven't found a way to simply override a component method in vue docs. I could create a new component and pass the converted options down, but I need access to the google object, which is only loaded internally by the plugin.

我也读过我可以使用mixins，但尚不清楚如何使用.这不起作用:

I have also read I could use mixins, but it's not clear how. This doesn't work:

Vue.component('MyCustomChart', {
    mixins: ['vue-chart'],
    methods: {
        buildWrapper (chartType, dataTable, options, containerId) {
            let wrapper = new google.visualization.ChartWrapper({
                chartType: chartType,
                dataTable: dataTable,
                options: google.charts.Bar.convertOptions(options), // that's all I need
                containerId: containerId
            })

            return wrapper
        },
    }
})

[Vue警告]:无法装入组件:模板或渲染函数未定义.(位于MyCustomChart中)

[Vue warn]: Failed to mount component: template or render function not defined. (found in MyCustomChart)

推荐答案

您可以使用Vue的extend方法来自定义插件组件.

You can use Vue's extend method to customize plugin components.

在您的情况下:

import VueCharts from 'vue-charts'  
Vue.use(VueCharts);

const Base = Vue.options.components["vue-chart"];
const CustomChart = Base.extend({
  methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: google.charts.Bar.coverOptions(options),
        containerId: containerId
      })

      return wrapper
    },
  })
}

Vue.component('MyCustomChart', CustomChart);

(向Bert Evans致谢，他指出您需要在扩展到自定义之前从 Vue.options.components 中引用基本组件)

(credit to Bert Evans for noting that you need to reference the base component from Vue.options.components before extending to customize)

这篇关于覆盖组件方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！