Question

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

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

export default myFun;

这是我的vue组件的 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>

我有两个问题。

首先，如何在创建的生命周期钩子中调用此方法以自动运行。
其次如何点击按钮调用此方法＆＃34; Call External JS＆＃34;

因为我知道在没有纯JS外部文件的帮助下，可以通过vueJS轻松完成更改div的内容。但我要问这个问题是为了澄清如何在vue组件中使用外部JS文件的概念。

谢谢。

Answer 1

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

struct LogData{
 int time;
 Int catagory;
 char * string;
}
struct LogNode {
LogData data;
LogNode* nextLog;
}

现在，您可以直接在import something from './something.js' export default { mixins: [something] }上使用在something.js中导出的任何方法/计算方式。

因此，在您的示例中，您从this导出了myFun()，我们可以像这样从something.js调用它：

Dashboard.vue

我希望语法正确，但这通常是mixins的想法。

Answer 2

您可以直接在所需的任何生命周期方法下调用导入的something函数。不过，我建议您使用mounted方法，因为这是在所有组件的HTML呈现后触发的方法。
有很多方法可以做到这一点。一种方法是在vue组件something下添加data函数，然后直接从模板调用该函数。

就个人而言，我在调用该函数的Vue组件上创建一个方法，然后让你的模板@click调用该方法。这样做可以让您在将来执行其他操作或调用其他功能。它对我来说也只是看起来更清洁。

考虑到这一点，你最终得到了这个：

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

<script>
import something from "./something.js"

export default {
  mounted() {
    something()
  },
  methods: {
    callSomething() {
      something()
    }
  }
}
</script>

Answer 3

反应或与组件（不是API）相关的方法应该写在methods中。我遵循这种做法。我有一个场景来澄清你的概念：

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

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

我在created钩子中使用了这个功能。事情是你可以使用它之一的用户定义的方法。

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

 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,{},{});
     }
  }
}

Answer 4

另一种方法是在数据块中添加该方法：

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>

Answer 5

以您的示例为例，外部javascript文件 something.js

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

export default myFun;

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

中

<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>

VueJS访问vue组件中的externaly导入方法

5 个答案: