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

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>

我有两个问题。

1. 首先，如何在创建的生命周期钩子中调用此方法以自动运行。
2. 第二，如何通过单击“调用外部JS”按钮来调用此方法？

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

谢谢。

Answer 1

1. 您可以在任何生命周期方法下调用导入的something函数。在这里，我建议使用mounted方法。一旦所有组件的HTML呈现完毕，就会触发。
2. 您可以在vue组件的方法下添加something函数，然后直接从模板调用该函数。

<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 {
    mounted() {
        something()
    },
    methods: {
        something,
    },
}
</script>

Answer 2

一个更好的解决方案是使用混合器：

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

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

因此，在您的示例中，您可以从myFun()导出something.js，我们可以从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>

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

Answer 3

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

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>