概述：在Vue.js组件中添加外部JS脚本有多种方法，包括使用`mounted`生命周期钩子、`vue-plugin-load-script`插件以及`import`语句。每种方法都提供了灵活性和便利性，可根据项目需求选择适合的方式。

在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>

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