码迷,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
迷上了代码!