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: {
        'dingtalk': {
          render(createElement) {
            return createElement(
              'script',
              {
                attrs: {
                  type: 'text/javascript',
                  src: '你的需要的js文件地址',
                },
              },
            );
          },
        },
      },
    }
    
    // 使用 <dingtalk></dingtalk> 在页面中调用

    第三种封装一个组件:

    export default {
      components: {
       'remote-js': {
        render(createElement) {
          return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
        },
        props: {
          src: { type: String, required: true },
        },
      },
      },
    }

    使用:<remote-jssrc="你的需要的js文件地址"></remote-js>

    欢迎关注公众号,进一步技术交流:

  • 相关阅读:
    人月神话读书笔记
    读人月神话有感
    Codeforces 137D
    Codeforces 1138B
    <WFU暑假训练一> 解题报告
    Codeforces 1250B
    Codeforces 1038D
    Codeforces 1202D
    Codeforces 87B
    Codeforces 208C
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/8241910.html
Copyright © 2011-2022 走看看