如何在 Vue 3 中使用外部 JS 文件中的内容？

2023-01-10 01:04:45

在 Vue 3 中引入和使用外部 JS 文件

在 Vue 3 中，引入和使用外部 JS 文件中的方法十分便利。本文将深入探讨不同的方法，并提供详细的示例，帮助你掌握这一技巧。

使用 setup 语法糖

setup 语法糖是引入外部 JS 文件方法最简单的方式。只需在 <script> 标签中引入文件即可。

<script>
import { useServer } from './server.js'

const { getServerData } = useServer()

export default {
  template: `
    <div>
      {{ getServerData() }}
    </div>
  `,
}
</script>

在 main.js 中引入函数所在的 JS 文件

如果你需要在多个页面中使用外部 JS 文件中的内容，这种方法更为适用。在 main.js 文件中，引入函数所在的 JS 文件。

import './server.js'

const app = createApp(App)

app.mount('#app')

在 main.js 中使用指令注入方法

这种方法同样适用于需要在多个页面中使用外部 JS 文件中的内容。在 main.js 文件中，可以使用指令将方法注入到 Vue 中。

import Vue from 'vue'

import './server.js'

Vue.directive('server', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      binding.value()
    })
  },
})

const app = createApp(App)

app.mount('#app')

代码示例

下面是一个具体的代码示例，展示了如何在 Vue 3 中引入和使用外部 JS 文件中的方法：

// server.js
export function getServerData() {
  return '数据来自服务器'
}

// Vue 组件
<template>
  <div>
    <p>{{ getServerData() }}</p>
  </div>
</template>

<script>
import { useServer } from './server.js'

const { getServerData } = useServer()

export default {
  name: 'MyComponent',
}
</script>