理解Vue项目中的JS引用：剖析外部JS方法调用

2024-01-30 19:16:33

Vue项目中的JS引用方式

在Vue项目中，可以使用多种方式来引用外部JS文件。最常见的方法是使用<script>标签，如下所示：

<script src="external.js"></script>

这样，就可以在Vue项目中使用外部JS文件中的方法和变量了。但是，需要注意的是，在HTML标签中是无法直接引用外部JS中定义的方法的。

为什么不能直接引用？

这个问题的答案在于Vue项目中JS文件的加载顺序。在Vue项目中，<script>标签中的JS文件会按照顺序加载，而HTML标签是在<script>标签之前加载的。因此，当HTML标签试图引用外部JS中定义的方法时，该方法还没有被加载，自然就会报错。

解决方案

为了解决这个问题，可以使用以下两种方法之一：

在<script>标签中定义方法

// 在`<script>`标签中定义方法
function myFunction() {
  // 方法内容
}

在methods中重新定义方法

// 在`methods`中重新定义方法
methods: {
  myFunction() {
    // 方法内容
  }
}

这样，就可以在HTML标签中使用这些方法了。

实际案例

为了更好地理解如何解决这个问题，我们来看一个实际案例。假设我们有一个名为external.js的外部JS文件，其中定义了一个名为sayHello()的方法。我们希望在Vue项目的HTML标签中使用这个方法。

我们可以使用以下两种方法之一来实现：

方法一：在<script>标签中定义方法

<script src="external.js"></script>

<template>
  <button @click="sayHello()">Say Hello</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      myFunction();
    }
  }
}
</script>

方法二：在methods中重新定义方法

<script src="external.js"></script>

<template>
  <button @click="sayHello()">Say Hello</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      // 调用外部方法
      externalFunction();
    }
  }
}
</script>