vue组件内部引入外部js文件的方法

之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js： export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第二种使用 createElement 方法： export default 在Vue.js应用中，有时我们需要在特定的组件内部引入外部JavaScript文件，而不是全局引入。这样做的好处是可以避免不必要的资源加载，提高应用性能。本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作DOM引入JS： 这是最简单直接的方式，通过在`mounted`生命周期钩子中动态创建`<script>`标签并将其插入到DOM中。这种方法的代码如下： ```javascript export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } ``` 这样，当组件挂载完成后，JS文件会被加载。但要注意，这种方式的缺点是无法监听加载状态，且不适用于服务器端渲染（SSR）。 2. 使用`createElement`方法创建组件： 这种方式创建一个自定义组件`remote-js`，在组件的`render`函数中返回一个`<script>`元素。例如： ```javascript export default { components: { 'remote-js': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: '你的需要的js文件地址', }, }, ); }, }, }, } ``` 然后在组件模板中使用`<remote-js></remote-js>`来引入外部JS。这种方式比第一种更灵活，可以控制何时加载和卸载脚本。 3. 封装一个通用的组件： 可以创建一个名为`importJs.js`的通用组件，它接受一个`src`属性来指定JS文件的URL，并监听加载和错误事件。示例代码如下： ```javascript // importJs.js import Vue from 'vue' Vue.component('remote-script', { render: function (createElement) { var self = this; return createElement( 'script', { attrs: { type: 'text/javascript', src: this.src, }, on: { load: function (event) { self.$emit('load', event); }, error: function (event) { self.$emit('error', event); }, readystatechange: function (event) { if (this.readyState == 'complete') { self.$emit('load', event); } }, }, }, ); }, props: { src: { type: String, required: true, }, }, }); ``` 然后在需要的地方导入并使用这个组件： ```javascript // 引入 import 'common/importJs.js' // 使用 <remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script> ``` 这种方式提供了加载状态的反馈，并可以通过事件处理程序进行错误处理，更加健壮和可控。 总结来说，这三种方法都旨在解决Vue组件内部按需引入外部JS文件的问题，各有优劣。操作DOM简单直接，但缺乏控制；`createElement`方法灵活，但需要手动管理；封装组件则更为全面，能处理加载状态和错误。开发者可以根据具体需求选择合适的方法。在实际项目中，还可以考虑结合Vue的异步组件和动态导入（`import()`）等特性，优化加载性能。