修改vue组件方法

Question

在我的项目中，我已经安装了vue-picture-input ，但我需要修改 PictureInput.vue 中的一个方法：

preloadImage (source, options) {

  ... code ...

  let headers = new Headers()
  headers.append('Accept', 'image/*')
  fetch(source, {
    method: 'GET',
    mode: 'cors',
    headers: headers
  })

  ...code..

}

我需要在请求中添加 header 如何扩展/覆盖它？

在我的 main.js 中，我将 vue 打开为：

new Vue({
 router,
 store,
 vuetify,
 render: h => h(App)
}).$mount('#app')

Answer 1

您不能覆盖其他构建组件中的方法。 你可以创建这个组件的一个分支，改变它的方法然后构建它。 或者如果这个组件是一个简单的项目，你可以将它的.vue 文件复制到你的项目中，并将其用作本地组件。

Answer 2

我找到了！

我必须扩展组件，在我的主要设置中：

import PictureInput from "vue-picture-input";

Vue.component('PictureInput', PictureInput);
const newPictureInput = Vue.component('PictureInput').extend({
  methods: {
    preloadImage (source, options) {

      ...code...

      let headers = new Headers()
      headers.append('Accept', 'image/*')
      headers.append(newHeader)
      fetch(source, {
        method: 'GET',
        mode: 'cors',
        headers: headers
      })

     ...code...

    }
  }
});

Vue.component('newPictureInput', newPictureInput);

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

它奏效了！