在组件内部使用时未定义 Dropzone答案

【问题标题】：Dropzone is not defined when used inside a component在组件内部使用时未定义 Dropzone
【发布时间】：2019-02-19 10:58:03
【问题描述】：

我目前正在尝试将 vue2-dropzone 导入我的 Laravel 项目，因此它正在使用 Laravel mix。

我将它导入到我的 bootstrap.js 中，如下所示：

import vueDropzone from "vue2-dropzone";
Vue.component('vueDropzone', vueDropzone)

然后我希望能够在名为“CreatePersonalExpense.vue”的文件中的一个组件中使用。使用Vue router 访问此组件。

下面是我的组件中如何使用它的 sn-p：

<template>

<div class="form-row py-2">
    <div class="col-md-12">
        <h4>Upload</h4>
        <vue-dropzone v-on:vdropzone-sending="sendingFiles" id="drop1" ref="myVueDropzone" @vdropzone-complete-multiple="afterAllFilesUploaded" :options="dropOptions"></vue-dropzone>
    </div>
</div>

</template>

<script>
    export default {

        data() {
            return {
                type: "personal",
                id: "",
                total: "",
                files: {
                },
                dropOptions: {
                    url: '/api/expenses/files',
                    autoProcessQueue: false,
                    uploadMultiple: true,
                    headers: { "x-csrf-token": document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
                    params: {}
                },
                errors: new Errors(),
                form: new Form(),
            }
        },

        components: {
            vueDropzone
        }
}
</script>

但是 dropzone 无法识别，我收到错误：

Uncaught ReferenceError: vueDropzone is not defined

但是，如果我通过将 import vueDropzone from "vue2-dropzone"; 放在脚本标记的开头将 dropzone 直接导入到此 Vue 组件中，则 dropzone 可以正常工作。为什么我不能将它包含在 bootstrap.js 文件中并让它在那里工作？

【问题讨论】：

对于导入的模块，我主要使用Vue.use('vueDropzone')

标签： vue.js vuejs2 dropzone.js laravel-mix vue2-dropzone

【解决方案1】：

如果您已经在bootstrap.js 中注册了vueDropzone，则无需在您的组件中再次注册。你应该在CreatePersonalExpense.vue中删除它

components: {
  vueDropzone
}

vueDropzone 是一个未定义的变量。只需将其删除即可。

【讨论】：

【解决方案2】：

尝试如下定义 =>

Vue.component('vue-dropzone', vueDropzone)

【讨论】：

我仍然得到 vueDropzone is not defined 未定义。这很奇怪，因为我还有其他组件（例如 vue2-datepicker），它们的定义方式完全相同并且工作正常。
在组件中尝试 => 组件：{ vueDropzone: vueDropzone }
嘿，我猜这个组件部分应该在 bootstrap.js 中。试着从你的文件中删除它。
对于导入的模块，我主要使用Vue.use('vueDropzone')
@Riddhi 我在组件文件中使用了components: { vueDropzone: vueDropzone }，在 bootstrap js 文件中使用了Vue.component('vue-dropzone', vueDropzone)，但这不起作用。我还在导入下的 bootstrap.js 文件中尝试了Vue.use('vueDropzone')，但我得到了同样的错误。很奇怪..