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>
欢迎关注公众号,进一步技术交流:
vue组件内部引入远程js文件的更多相关文章
- vue组件如何引入外部.js/.css/.scss文件
可在相应的单vue组件引入相应文件. 1.引入外部.js文件. 2.引入外部.css文件. 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到 ...
- Vue引入远程JS文件
问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库 ...
- Vue如何引入远程JS文件
直接在dom上操作: export default { mounted() { const s = document.createElement('script'); s.type = 'text/j ...
- vue-cli3 将自己写的组件封装成可引入的js文件
一.调整项目结构 首先用 vue-cli 创建一个 default 项目 // 顺便安利一篇文章<Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目> 当前的项目目录是这样的: ...
- vue页面引入外部js文件遇到的问题
问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...
- Vue中引入静态JS文件(爬坑)
前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-ad ...
- 分离vue组件内部css
当我们使用vue组件的时候,使用webpack打包的时候,默认会把vue组件内部的css打包到页面上,但是打包到页面上很丑陋,所以我们希望可以把vue组件内部的css抽离到css文件中,使用vue-s ...
- vue 调用常量的config.js文件
我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/othe ...
- 使用jQuery插件时避免重复引入jquery.js文件
当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...
随机推荐
- Linux 小知识翻译 - 「动态DNS」(DDNS)
这次聊聊「动态DNS」. DNS上周已经介绍过了,就是提供主机名和IP地址对应关系的结构.「动态DNS」是对主机名和IP地址的对应关系提供动态管理的结构. 以前的DNS没有考虑IP地址变化的情况.但是 ...
- Java Native Interface(JNI)
JNI能让Java代码在Java虚拟机里调用其他编程语言(例如C.C++)写的应用或库,且不会影响任何Java虚拟机的实现. 什么时候用JNI? 1.应用程序所需的平台相关功能,标准的Java类库不支 ...
- 14.UA池和代理池
今日概要 scrapy下载中间件 UA池 代理池 今日详情 一.下载中间件 先祭出框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - ...
- 【Teradata】磁盘碎片整理(ferret工具)
DEFRAGMENTcombines free sectors and moves them to the end of a cylinder.PACKDISKfill (or packs) cyli ...
- 部署tinyproxy代理服务
#安装依赖 yum install asciidoc #下载 wget https://github.com/tinyproxy/tinyproxy/releases/download/1.8.4/t ...
- SSM框架整合(IntelliJ IDEA + maven + Spring + SpringMVC + MyBatis)
本篇文章主要内容是介绍如何使用IntelliJ IDEA创建Spring + SpringMVC + MyBatis项目,下面会给出项目搭建的详细步骤以及相关的配置文件. 1. 创建maven项目 ...
- package-info.java的使用
一.引入 上文中,提到了注解类JyzTargetPackage可以定义为@Target(ElementType.PACKAGE),可是在被注解类里我无论怎么加,编译器都报错,于是引入了package- ...
- RestFul风格API(Swagger)--从零开始Swagger
引言:随着技术的革新,现在的系统基本上都是前后端分离,并且在各自的道路上越走越远,而前后端之间通信或者联系的桥梁就是API,而这里基于RESTful风格的API框架就来了!欲知后事如何,客官别急,往下 ...
- 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法
问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...
- mac sourcetree push分支选中所有tag的时候报错
错误信息: ....... ! [rejected] 573_0811_stable -> 573_0811_stable (already exists)updating local trac ...