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

【问题标题】：How pass data from component to external js file如何将数据从组件传递到外部 js 文件
【发布时间】：2020-05-31 13:55:34
【问题描述】：

我想在我的外部 JavaScript 文件中使用我的组件数据，其中包含我的 Dropzone 配置。我尝试使用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 组件。如何让外部文件可以访问它们？

【问题讨论】：

这能回答你的问题吗？ Using Axios in VueJS - this undefined
不要在外部脚本中使用 Vue 的东西，反之，用组件包裹起来。
好的，如果我想将它作为配置包装到多个组件中怎么办？如何在不为两个组件重复相同配置的情况下做到这一点
不知道entry 会发生什么，所以这在很大程度上取决于您的情况。有几种方法可以与嵌套组件共享数据 - 通过 $root 或其他全局对象、$root 事件、Vuex、提供/注入等。

标签： vue.js vuejs2 dropzone.js

【解决方案1】：

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

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>

【讨论】：