如何将数据从组件传递到外部js文件

Question

我想在包含我的 Dropzone 配置的外部 JavaScript 文件中使用我的组件数据。我尝试使用 Function.prototype.bind:

失败

export const dropzoneConfig = {
    url: api.http.baseUrl + '/files',
    thumbnailWidth: 150,
    maxFilesize: 5,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    sending: function (file, xhr, formData) {
        formData.append('type', 'photo');
    },
    success: function (file, xhr) {
        file.id = xhr.data.id;
        if (this.entry.files === undefined) {
            this.entry.files = [];
        }
        this.entry.files.push(xhr.data);
        this.saveNote();
    }.bind(this),
    headers: api.http.authHeaders().headers
};

在上面的代码中，this.entry 和 this.saveNote 不可用，因为它们来自我的 Vue 组件。如何让外部文件可以访问它们？

Answer 1

一个更通用的解决方案是让组件传入一个 success 事件处理程序，该处理程序可以访问组件的数据和方法，如下所示。该解决方案将配置与组件的内部分离。

dropzoneConfig.js:

export const dropzoneConfig = ({ onSuccess }) => ({
  //...
  success(file, xhr) {
    //...
    onSuccess(xhr.data)
  }
})

App.vue:

<script>
import Dropzone from 'dropzone'
import { dropzoneConfig } from './dropzoneConfig'

export default {
  data() {
    return {
      entry: {
        files: []
      }
    }
  },
  created() {
    Dropzone.options.myComponent = dropzoneConfig({
      onSuccess: fileData => this.onDropzoneSuccess(fileData)
    })
  },
  methods: {
    saveNote() {
      //...
    },
    onDropzoneSuccess(fileData) {
      this.entry.files.push(fileData)
      this.saveNote()
    }
  }
}
</script>

如何将数据从组件传递到外部js文件

How pass data from component to external js file

dropzone.js

vue.js

vuejs2