Javascript VueJS访问vue组件中外部导入的方法

我有一个外部Java脚本文件 something.js

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

这是我的vue组件 仪表板.vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>

调用外部JS
从“/something.js”导入某些内容
导出默认值{
创建（）{
}
}

我有两个问题

首先，我如何在创建的生命周期钩子中调用此方法以自动运行

第二，如何通过点击“调用外部JS”按钮调用此方法

当然，我知道更改div的内容可以由vueJS轻松完成，而无需纯JS外部文件的帮助。但我问这个问题是为了澄清如何在vue组件中使用外部JS文件的概念

多谢各位

您可以在所需的任何生命周期方法下调用导入的

something

函数。在这里，我建议使用

mounted

方法。一旦呈现了组件的所有HTML，就会触发

您可以在vue组件的方法下添加

something

函数，然后直接从模板调用该函数

调用外部JS
从“/something.js”导入某些内容
导出默认值{
安装的（）{
某物
},
方法：{
某物
},
}

反应性方法或与组件（非API）耦合的方法应使用

方法编写。我遵循此实践。
我这里有一个场景来澄清您的概念：

JS文件（包含函数的文件）文件名-api.JS

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

我在
created
hook中使用了这个函数。
问题是您可以使用它作为用户定义的方法之一

Vue文件（我们将使用js文件中的函数）-文件名-infoform.Vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>

更好的解决方案是使用mixin：

import something from './something.js'
export default {
  mixins: [something]
}

现在，您可以直接在
this
上使用在
something.js
中导出的任何方法/计算

因此，在您的示例中，您有从
something.js
导出的
myFun（）
，我们可以从
Dashboard.vue
调用它，如下所示：

<template>
    <div>
        <button type="button" name="button" @click="myFun">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
    import something from "./something.js"
    export default {
        mixins: [something],
        mounted(){
            this.myFun()
        }
    }
</script>


调用外部JS
从“/something.js”导入某些内容
导出默认值{
米金斯：[某物]，
安装的（）{
这个.myFun（）
}
}

我希望语法正确，但这通常是mixin的想法。
另一种方法是在数据块中添加方法：

import something from "./something.js" // assuming something is a function

data() {
  return {
    // some data...
    something,
  }
}

然后在模板中使用它，如：

<template>
    <div class="btn btn-primary" @click="something">Do something</div>
</template>


做点什么
对于您的示例，外部javascript文件something.js

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

您可以像解析方法中的对象一样解析它：{}在Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>


调用外部JS
从“/something.js”导入某些内容
导出默认值{
方法：{
某物
}
}
可能的副本非常感谢您的解释。=）如果您需要更新正在注入的对象的状态，此解决方案非常有用尼斯解决方案！更干净和通用！如果在方法中包含两个分开的文件，该怎么办？像something1.js和something2.js一样，以下内容不起作用：从“/something1.js”导入something1，从“/something2.js”导入something2，导出默认值{methods:{something1，something2}}@user2543127它应该起作用，如果您的something1.js和something2.js分别导出一个方法/函数PS：您需要确保变量something1和something2包含一个函数。我尝试了，但没有成功。。你能给我举个例子吗？Thanks@user2543127请以以下回购协议为例。