vue当前页面引入外部JS文件的3种方式

之所以要做这个是因为，在一个组件内部需要引入一个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 {
        components:
        {
            'remote-js':
            {
                render(createElement) {
                    return createElement('script', {
                        attrs: {
                            type: 'text/javascript',
                            src: '你的需要的js文件地址',
                        },
                    },
                    );
                },
            },
        },
    }

// 使用 在页面中调用

第三种封装一个组件

importJs.js

// 导入外部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
        }
    }
});

// 引入

import 'common/importJs.js'

// 使用

以上就是vue组件内部引入外部js文件的全部内容，希望对大家的学习有所帮助。