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

Posted 2023-02-22

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

【英文标题】：How to call the function in a separate JS file through a vue instances [duplicate]

【发布时间】：2021-08-30 14:00:12

【问题描述】：

我在一个单独的 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

【问题讨论】：

"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

我不想向外部工具和插件添加任何依赖项。但是，附加的帖子没有任何可接受的答案。

@aakash，没有接受的答案仅仅是因为 OP 没有选择一个。

@aakash。许多答案不需要任何依赖

没有一个在 .net 应用程序中工作

【参考方案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>

【讨论】：

我在 ASP .net 应用程序上实现了这个。但这没用我也试过了。