在Vue.js组件中添加外部JS脚本可以通过以下几种方法实现。下面将详细介绍每种方法的步骤以及相关的实例源代码。

方法一：使用mounted生命周期钩子

在Vue.js组件中，可以使用mounted生命周期钩子来在组件被挂载后执行一些操作，包括加载外部JS脚本。

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.loadExternalScript();
  },
  methods: {
    loadExternalScript() {
      // 创建script标签
      const script = document.createElement('script');
      script.src = 'external-script.js'; // 外部JS脚本的路径

      // 将script标签添加到body中
      document.body.appendChild(script);
    }
  }
};
</script>

方法二：使用vue-plugin-load-script插件

vue-plugin-load-script是一个专门用于在Vue.js中加载外部脚本的插件，使用起来更加方便。

首先，安装插件：

npm install vue-plugin-load-script

然后在组件中使用：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import Vue from 'vue';
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

export default {
  mounted() {
    this.$loadScript('external-script.js')
      .then(() => {
        console.log('外部脚本加载成功！');
      })
      .catch(() => {
        console.error('外部脚本加载失败！');
      });
  }
};
</script>

方法三：使用import语句

如果外部JS脚本是ES6模块，也可以使用import语句直接在组件中导入。

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import ExternalScript from 'external-script'; // 外部JS脚本的路径

export default {
  mounted() {
    // 使用导入的外部脚本
    ExternalScript.someFunction();
  }
};
</script>

选择其中一种方法，根据项目的实际情况和需求来决定使用哪种方式。