我有一个外部 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>
我有两个问题。
- 首先我如何在创建的生命周期钩子(Hook)中调用这个方法来自动运行。
- 其次,如何通过点击“调用外部 JS”按钮来调用此方法
因为我知道更改 div 的内容可以通过 vueJS 轻松完成,而无需纯 JS 外部文件的帮助。但是我问这个问题是为了阐明如何在 vue 组件中使用外部 JS 文件的概念。
谢谢。
最佳答案
更好的解决方案是使用 mixins:
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>
我希望我的语法正确,但这通常是 mixins 的想法。
关于javascript - VueJS访问vue组件中的外部导入方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49144933/