Vue如何引入远程JS文件
网络编程 2021-07-04 18:31www.168986.cn编程入门
本篇文章主要介绍了Vue引入远程JS文件,长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
问题
最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之。
思路
一开始的思路是在 Vue 加载完 Dom 之后(mounted
),使用 JavaScript 脚本在 body 中插入远程的脚本文件。
后来发现了 Vue 的 createElement
方法,简单的封装一个组件解决问题。
解决方法
第一版代码(直接在操作 Dom )如下:
export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = 'https://g.alicdn./dingding/dinglogin/0.0.2/ddLogin.js'; document.body.appendChild(s); }, }
使用 createElement 方法:
export default { ponents: { 'dingtalk': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: 'https://g.alicdn./dingding/dinglogin/0.0.2/ddLogin.js', }, }, ); }, }, }, } // 使用 <dingtalk></dingtalk> 在页面中调用
终极方案
通过封装一个组件 remote-js
实现:
export default { ponents: { 'remote-js': { render(createElement) { return createElement('script', { attrs: { type: 'text/javascript', src: this.src }}); }, props: { src: { type: String, required: true }, }, }, }, }
使用方法:
<remote-js src="https://g.alicdn./dingding/dinglogin/0.0.2/ddLogin.js"> </remote-js>
因为刚开始学习 Vue 有什么问题欢迎大家指出,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程