Vue 组件访问外部方法的终极指南：如何导入和调用？

vue.js

2024-03-31 14:35:29

## Vue 组件中访问外部导入方法：终极指南

### 引言

在 Vue.js 应用程序中，有时我们需要访问外部模块中的方法或函数。这篇文章将详细介绍如何在 Vue 组件中导入和调用外部方法，以及解决常见问题的解决方案。

### 导入外部方法

在 created 生命周期钩子中自动运行外部方法

导入外部方法： 使用 import 语句将外部 JavaScript 文件导入 Vue 组件。
在 created 生命周期钩子中调用方法： 在 created 生命周期钩子中调用外部方法，它将在组件实例化时自动运行。

点击按钮调用外部方法

模板中添加按钮： 在 Vue 组件模板中添加一个按钮并使用 @click 指令将其与方法关联。
脚本中定义方法： 在 Vue 组件脚本中定义一个方法来调用外部方法，这个方法将在按钮被点击时触发。

### 注意要点

确保外部 JavaScript 文件中导出了外部方法（例如，export default myFun;）。
确保在 Vue 组件中正确导入了外部 JavaScript 文件。
使用 @click 指令将按钮与方法连接。

### 示例代码

// something.js
function myFun() {
  console.log("Hello World!");
}
export default myFun;

// Dashboard.vue
<template>
  <div>
    <button type="button" @click="callExternalMethod">Call External JS</button>
  </div>
</template>

<script>
import myFun from "./something.js";
export default {
  created() {
    myFun();
  },
  methods: {
    callExternalMethod() {
      myFun();
    }
  }
};
</script>