zoukankan      html  css  js  c++  java
  • 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 {
      components: {
        'remote-js': {
          render(createElement) {
            return createElement(
              'script',
              {
                attrs: {
                  type: 'text/JavaScript',
                  src: '你的需要的js文件地址',
                },
              },
            );
          },
        },
      },
    }
    // 使用 <remote-js></remote-js> 在页面中调用
    

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    第三种封装一个组件:
    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'
    // 使用
    <remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>
  • 相关阅读:
    用C#新建网站的方法
    zhngutils.js
    jQuery源代码学习jQuery对象构建
    前端性能书单
    预则成,不预则废
    表格
    js延时周期执行setTimeout;setInterval;clearTimeout;clearInterval
    url备份
    前端性能集合(各种测试各种资源...)
    Scrum开发模式
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13826334.html
Copyright © 2011-2022 走看看