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

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”按钮来调用此方法

因为我知道改变 div 的内容可以很容易地通过 vueJS 完成，而无需纯 JS 外部文件的帮助。但是我问这个问题是为了澄清如何在 vue 组件中使用外部 JS 文件的概念。

谢谢你。

原文由 margherita pizza 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 kingdaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 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>

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

原文由 Narxx 发布，翻译遵循 CC BY-SA 4.0 许可协议