如何通过vue实例调用单独的JS文件中的函数[重复]

Question

我在一个单独的 js 文件 toaster-message.js 中有一个 javascript 函数，该文件位于 ASP.net 应用程序的 wwwroot/js 中，它调用引导烤面包机。

toaster-message.js。

showCompleteToast: (message) => {

    const toastElm = document.getElementById('#complete-toast');
    const toast = new bootstrap.Toast(toastElm)

    toast.show();
}

我想从我的 vue 实例中调用 showCompleteToast()。我正在使用 Direct 脚本 Include 创建 vue 实例。

我不想在 Vue 实例之外的函数中添加任何 Vue 依赖项。那么在Vue实例之外的外部js文件中调用函数的正确方法是什么？

@section scripts {

    <script>

        const app = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            methods: {
                showToast: function(){
                   //I want to call the show toast from here
                },
                submit: async function () {
                    try {

                        this.showToast();

                    } catch (error) {
                      
                        console.log(error)
                    }
                }
            }

        });
    </script>
}

当我尝试使用以下方式导入时：

import { showCompleteToast } from "~/lib/js/toater-message.js"

使用时：

export default {
   showCompleteToast: (message) => {

       const toastElm = document.getElementById('#complete-toast');
       const toast = new bootstrap.Toast(toastElm)

       toast.show();
   },
   // ... other methods here
};

我得到的错误是：

“Uncaught SyntaxError: Cannot use import statement outside a module”

我尝试使用以下方式导入：

<script type="module">
    import { showCompleteToast } from "../../wwwroot/js/toaster-message.js"
    alert(showCompleteToast)
</script>

这给出了错误：

GET https://localhost:44307/wwwroot/js/toaster-message.js net::ERR_ABORTED 404

Answer 1

我对 php 不是很熟悉，但通常您可以导入 JavaScript 文件，然后使用它们的内容。唯一的要求是导入的文件需要定义导出。

// toaster-message.js

export default {
   showCompleteToast: (message) => {

       const toastElm = document.getElementById('#complete-toast');
       const toast = new bootstrap.Toast(toastElm)

       toast.show();
   },
   // ... other methods here
};

然后像这样把它拉到你的 Vue 文件中：

@section scripts {

    <script>
        import { showCompleteToast } from "..path/to/toaster-message.js"
        const app = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            methods: {
                showToast: function(){
                   //I want to call the show toast from here
                   showCompleteToast();
                },
                submit: async function () {
                    try {

                        this.showToast();

                    } catch (error) {
                      
                        console.log(error)
                    }
                }
            }

        });
    </script>
}