关于Vue下组件引入第三方外部Js几种方式

第一种方式：利用Vue的mounted生命周期

const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js';
document.body.appendChild(oScript);

第二种方式：利用Vue的createElement方法

components: {'scriptLink': {render(createElement) {return createElement('script',{attrs: {type: 'text/javascript',src: '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js',},},)}}}

然后通过<scriptLink></scriptLink> 引入到组件中

第三种方式：封装一个remoteJs 组件

<template><remote-js src="//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js"></remote-js>
</template>
<script>
export default {components: {'remote-js': {render(createElement) {return createElement('script', {attrs: {type: 'text/javascript', src: this.src}});},props: {src: { type: String, required: true}}}}
}
</script>

第四种方式：通过webpack-require-http插件

安装

npm install webpack-require-http

webpack.base.config.js配置

{...entry:{...},output:{...},externals:[require('webpack-require-http')]...
}

在vue组件中使用

require(['http://pv.sohu.com/cityjson?ie=utf-8'], () => {setTimeout(() => {if (returnCitySN) {console.log(returnCitySN)} else {}}, 1500)})

关于Vue下组件引入第三方外部Js几种方式相关推荐

Vue 路由组件通讯传参的 8 种方式
当 props 是一个对象时,它将原样设置为组件 props.当 props 是静态的时候很有用. 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过 ...
每日一道面试题：Vue 组件间通信有哪几种方式？
Vue 组件间通信有哪几种方式? 父子组件通信.隔代组件通信.兄弟组件通信 (1)props / $emit适用父子组件通信 - 这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不 ...
vue v-html字体大小修改,详解三种方式解决vue中v-html元素中标签样式
Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} 返回列表当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果, .con{ ...
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
引入字体图标的三种方式
@引入字体图标的三种方式TOC Unicode引用 fontclass引用 symbol引用--此种引用方式支持多色图标字体包: 1.icomoon字库https://icomoon.io/ 2.阿 ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
Ajax的异步同步原理以及js几种方式的实现
Ajax的异步同步原理以及js几种方式的实现的个人详细解析 Ajax简介 Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML ...

关于Vue下组件引入第三方外部Js几种方式

第一种方式：利用Vue的mounted生命周期

第二种方式：利用Vue的createElement方法

第三种方式：封装一个remoteJs 组件

第四种方式：通过webpack-require-http插件

关于Vue下组件引入第三方外部Js几种方式相关推荐

最新文章

热门文章