VueJS 在 vue 组件中访问外部导入的方法 [英] VueJS accessing externaly imported method in vue component
问题描述
我有一个外部 Java 脚本文件something.js
function myFun(){document.getElementById("demo").innerHTML="Hello World!";}导出默认 myFun；这是我的 vue 组件Dashboard.vue
<div><button type="button" name="button" @click="">调用外部JS</button><div id="演示"></div><脚本>从./something.js"导入一些东西导出默认{创建(){}}
我有两个问题.
- 首先我如何在创建的生命周期钩子中调用这个方法来自动运行.
- 第二个我如何通过点击调用外部JS"按钮来调用这个方法
当然，我知道更改 div 的内容可以通过 vueJS 轻松完成，无需纯 JS 外部文件的帮助.但我问这个问题是为了澄清如何在 vue 组件中使用外部 JS 文件的概念.
谢谢.
您可以在您想要的任何生命周期方法下调用导入的
something函数.在这里，我建议使用mounted方法.一旦组件的所有 HTML 都已呈现，就会触发.可以在vue组件的方法下添加
something函数，然后直接从模板中调用该函数.
<div><按钮类型=按钮"名称=按钮"@click=某物">调用外部JS<div id=演示"></div><脚本>从./something.js"导入一些东西；导出默认{安装(){某物()},方法: {某物，},}
I have an External Java Script File something.js
function myFun(){
document.getElementById("demo").innerHTML="Hello World!";
}
export default myFun;
and this is my vue component 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>
I have two questions.
- First how do I call this method inside the created life cycle hook to automatically run.
- Second how do I call this method by hitting the button "Call External JS"
Of-cause I know to change the content of a div can easily done by vueJS without the help of pure JS external files. But I'm asking this question for clarify the concepts of how do I use external JS files inside the vue component.
Thank you.
You can call the imported
somethingfunction under any lifecycle method you want. Here, I'd recommend using themountedmethod. That triggers once all of the component's HTML has rendered.You can add the
somethingfunction under the vue component's methods, then call the function directly from the template.
<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>
这篇关于VueJS 在 vue 组件中访问外部导入的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
