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

Question

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

烤面包机留言。js。

showCompleteToast: (message) => {

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

    toast.show();
}

我想从我的vue实例调用show CompleteToast（）。我创建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>
}