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

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

关注

发信

关注(28)粉丝(399)

本文介绍了VueJS 在 vue 组件中访问外部导入的方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个外部 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>调用外部JS<div id=演示"></div>

<脚本>从./something.js"导入一些东西；导出默认{安装(){某物()},方法: {某物，},}

I have an External Java Script Filesomething.js

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

export default myFun;

and this is my vue componentDashboard.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 something function under any lifecycle method you want. Here, I'd recommend using the mounted method. That triggers once all of the component's HTML has rendered.
You can add the something function 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 组件中访问外部导入的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-30 00:40