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>

 

歡迎關注公眾號，進一步技術交流：