覆盖组件方法

Question

我正在使用VueCharts，它是一个用于 vue 的 Google Charts 插件。

我正在尝试为图表提供更新的 Material Design 外观。我试过将“google.charts.Bar”传递给图表类型道具，它确实有效。但是，许多选项都被忽略了，因为正如Google Charts 文档中所述，选项对象需要使用 进行转换google.charts.Bar.convertOptions(options)，而插件不会这样做。

查看源代码，该插件安装了一个“vue-chart”组件。该组件用于ChartWrapper处理加载图表库，如下所示：

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

      return wrapper
    },

所以我只需要覆盖这个方法来转换选项，然后再将它们传递给 ChartWrapper。

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

我也读过我可以使用 mixin，但不清楚如何使用。这不起作用：

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 中找到）

Answer 1

您可以使用 Vue 的扩展方法来自定义插件组件。

在你的情况下：

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在扩展到自定义之前引用基础组件）

Answer 2

我对此进行了一些尝试，并且在我对扩展内容的建议中误导了@thanksd。一种有效的方法是：

import VueChart from "vue-charts";

Vue.use(VueChart);

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

      return wrapper
    }
  }
});

Vue.component("custom-chart", CustomChart);

进一步说明

正如我所想的，通过 Vue 的原生扩展或通过 扩展 VueChartlodash都不会达到预期的结果。导入 VueChart 的结果是一个插件定义。既lodash和Vue将愉快地接受作为对象扩展，但也不会导致Vue的组件。尝试使用任何一个的结果都会导致问题中提到的错误，“模板或渲染函数未定义”。这个错误是绝对正确的；扩展VueChart使用单个方法扩展安装功能。

那么如何让对象扩展呢？vue-charts不暴露它。安装只是调用Vue.component('vue-chart', Chart).

幸运的是，Vue 通过Vue.options.components. 通过扩展，Vue.options.components["vue-chart"]我们得到了一个合适的 Vue 组件定义。

最后，我很惊讶google@RegularEverydayNormalGuy 无法使用。它必须可用；vue-chart使用它。但他是对的，它不是立即可用的。vue-chart异步加载脚本。同样，不幸的是，该插件不会以任何方式提供给您，它只是在异步加载后初始化自己。有很多方法可以解决这个问题，但此时您应该提交一个拉取请求。

原答案

options是 上的属性vue-chart。为什么不直接传入转换后的选项？

new Vue({
    data:{
        convertedOptions: google.charts.Bar.convertOptions({<my options>})
    }
})

并在模板中

<vue-chart :options="convertedOptions"></vue-chart>