码迷,mamicode.com
首页 > Web开发 > 详细

vue组件内部引入远程js文件

时间:2018-01-08 13:35:31      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:type   tee   col   def   ace   ons   const   blog   一个   

之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位。如果放在index.html,这样每个组件都会有这个js。所以需要在组件内单独引入。

第一种操作 Dom引入js:

export default {
  mounted() {
    const s = document.createElement(‘script‘);
    s.type = ‘text/javascript‘;
    s.src = ‘https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js‘;
    document.body.appendChild(s);
  },
}

第二种使用 createElement 方法:

export default {
  components: {
    ‘dingtalk‘: {
      render(createElement) {
        return createElement(
          ‘script‘,
          {
            attrs: {
              type: ‘text/javascript‘,
              src: ‘https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.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>

vue组件内部引入远程js文件

标签:type   tee   col   def   ace   ons   const   blog   一个   

原文地址:https://www.cnblogs.com/cczlovexw/p/8241910.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!