js 获取vue组件html_vue项目中,index.html数据与组件之间通信,传值,以获取MAC地址为例...
最近在项目里接手别人的代码来做完善,其中一个是修复获取不到MAC地址的bug,仔细看了下代码,发现需要用到Activex控件。
上一位同事在写的时候把写在index.html文件中,获取mac地址的js代码也写在了index.html中,读取完之后保存在localStorage里面,但是这里有个问题,这个Activex控件获取mac地址是一个异步操作,如果第一次获取mac地址并且缓存没有mac地址的信息,必定会报错。
这次修改的关键点就是如何将这个异步操作变成同步操作,或者当控件获取到mac之后传播到组件里,组件再做相对应的动作。
所以,演变成index.html文件的数据如何跟组件通信。
既然找到关键点,那么就来解决问题吧!
我们都知道vue组件里通信有几个办法:
子 -> 父组件通信:子组件$emit,父组件$on;
父 -> 子组件通信:子组件定义props,父组件使用子组件时通过props向子组件传值;
兄弟组件或者平行组件:定义一个eventBus,引入eventBus,通过eventBus的$on和$emit来通信;
如果项目比较大,推荐使用vuex来通信。
上面的方法,在index.html中貌似都用不上...除非将它们绑在window对象上...
所以变通一下,
在main.js文件中:
window.eventBus = new Vue();
接下来我们在index.html中的script标签打印下eventBus:
很好,能打印出来就行。
index.html文件,在body标签里插入:
script代码:
var IPEnabled = objObject.IPEnabled;
var IPAddress = objObject.IPAddress(0);
if (IPEnabled != null && IPEnabled != "undefined" && IPEnabled == true ) {
if (IPAddress) {
window.sIPAddr = objObject.IPAddress(0);
}
if (objObject.MACAddress) {
window.sMacAddr = objObject.MACAddress;
}
if (objObject.DNSHostName) {
window.sDNSName = objObject.DNSHostName;
}
}
// console.log("获取mac地址成功:", sMacAddr);
window.eventBus.$emit('getMac', window.sMacAddr);
vue组件里的方法:
clickPort() {
var userAgent = navigator.userAgent;
if (userAgent.indexOf(".NET") > -1 && userAgent.indexOf("NT 10.0") > -1) {
var service = locator.ConnectServer(); // eslint-disable-line
service.Security_.ImpersonationLevel = 3;
service.InstancesOfAsync(foo, "Win32_NetworkAdapterConfiguration"); // eslint-disable-line
}
eventBus.$off('getMac'); // 关闭上一次的监听
eventBus.$on('getMac', (_mac) => {
alert(`获取MAC地址:${_mac}`);
this.msg = _mac;
});
}
ok,来执行一把:
成功!
以上是第一种方法,利用的是eventBus,记住在使用eventBus的时候,记得关闭上一次的监听
下面是第二种方法:
怎么在index.html中给组件赋值呢?或者说怎么调用组件里的方法呢?
利用同样的原理,将this绑定到window上就可以了。
上代码,
组件:
clickPort() {
var userAgent = navigator.userAgent;
window.thisComponent = this; // 将组件实例赋予一个全局变量
if (userAgent.indexOf(".NET") > -1 && userAgent.indexOf("NT 10.0") > -1) {
var service = locator.ConnectServer(); // eslint-disable-line
service.Security_.ImpersonationLevel = 3;
service.InstancesOfAsync(foo, "Win32_NetworkAdapterConfiguration"); // eslint-disable-line
}
}
index.html:
// 先判断是否存在window.thisComponent.componentThis为vue组件实例
if (window.thisComponent) {
// 将mac地址赋予实例的一个属性
window.thisComponent.sMacAddr = window.sMacAddr;
// 致空,以免造成内存泄露;
window.thisComponent = null;
// console.log(window.componentThis);
}
运行一把:
没毛病,并且直接在模板里展示出来;
使用第二种方法,需要在组件的data函数中初始化sMacAddr字段,否则不会在模板中展示出来,并且在index.html文件中window.thisComponent.sMacAddr,这里的sMacAddr字段必须跟组件里初始化的字段一致
总结:
在这无论用哪个方法,都得利用到window这个对象;这个也是没办法的事,其实利用同样的道理,也是直接绑定在VUE的实例上;
条条大路通罗马,小弟献上一点技巧。
js 获取vue组件html_vue项目中,index.html数据与组件之间通信,传值,以获取MAC地址为例...相关推荐
- Nuxt.js(Vue SSR)项目配置以及开发细节
一.项目中不要使用 v-if 使用 v-if 会在查看源码的时候无法显示标签,需要换成 v-show 二.项目中跳转页面尽量使用 a 标签 无论使用 vue router 还是使用 nuxt-link ...
- Android 项目中常用到的第三方组件
项目中常用到的第三方组件 1 社会化分享 ShareSDK-Core-2.5.9.jar ShareSDK-QQ-2.5.9.jar ShareSDK-QZone-2.5.9.jar ShareSDK ...
- springboot项目中mybatis实现数据的基本查询
SpringBoot项目中mybatis实现数据的基本查询 本章内容概述: mapper 查询 xml 文件基本使用 通过 mybatis 实现一条数据的查询 1 用户数据表 2 用户信息对应的实体类 ...
- js 获取vue组件html_关于Vue中main.js,App.vue,index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后,传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
- vue 方法获取返回值_Vue项目中Api的组织和返回数据处理的操作
项目中的所有Api配置放在一个文件中,便于查找和修改,Api的版本从配置文件(config.js)中读取,采用 apiPrefix + url 的形式组成. 在配置文件中,Api 的配置采用 Http ...
- js定义全局变量 vue页面_vue项目中定义全局变量、函数的几种方法
前言 在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等.这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解.简单 ...
- 在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
最新文章
- redis安装+redis主从
- 零基础学python-3.2 变量赋值
- 【S操作】简单粗暴自动化免费文档存储备份方案
- Autocomplete
- 单调谐回路谐振放大器等效电路分析_手把手教你如何分析三极管电路
- 宝塔面板 创建 二级域名 Unable to round-trip http request to upstream
- SpringMVC学习指南-前言
- 无需手机NFC 如何使用微信小程序制作amiibo卡
- python领域驱动_DDD领域驱动设计学习初探
- SSM框架整合以及使用思路梳理
- VS2013 下载地址
- Simulink建模与仿真
- 0ops CTF/0CTF writeup
- JMS Message消息头、消息体、消息属性
- 我的世界java边境之地_我的世界边境之地是什么 我的世界边境之地介绍
- APM的3DR无线数传的安装
- 计算机c语言运算符号取整,c语言取整(c语言四舍五入取整)
- 31、Java——JDBC实现账号密码登录
- 用JS解决那些有趣的数学题!
- 《我如何自己做自己的导师》