vue项目中，index.html数据与组件之间通信，传值，以获取MAC地址为例

zorpan 发布于2019-08-23 17:11 / 2745人阅读

摘要：最近在项目里接手别人的代码来做完善，其中一个是修复获取不到地址的，仔细看了下代码，发现需要用到控件。所以，演变成文件的数据如何跟组件通信。

最近在项目里接手别人的代码来做完善，其中一个是修复获取不到MAC地址的bug，仔细看了下代码，发现需要用到Activex控件。

上一位同事在写的时候把写在index.html文件中，获取mac地址的js代码也写在了index.html中，读取完之后保存在localStorage里面，但是这里有个问题，这个Activex控件获取mac地址是一个异步操作，如果第一次获取mac地址并且缓存没有mac地址的信息，必定会报错。

这次修改的关键点就是如何将这个异步操作变成同步操作，或者当控件获取到mac之后传播到组件里，组件再做相对应的动作。

所以，演变成index.html文件的数据如何跟组件通信。

既然找到关键点，那么就来解决问题吧！

我们都知道vue组件里通信有几个办法：

子 -> 父组件通信：子组件$on，父组件$emit；

父 -> 子组件通信：子组件定义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代码：

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：

运行一把：

没毛病，并且直接在模板里展示出来；

使用第二种方法，需要在组件的data函数中初始化sMacAddr字段，否则不会在模板中展示出来，并且在index.html文件中window.thisComponent.sMacAddr，这里的sMacAddr字段必须跟组件里初始化的字段一致

总结：

在这无论用哪个方法，都得利用到window这个对象；这个也是没办法的事，其实利用同样的道理，也是直接绑定在VUE的实例上；
条条大路通罗马，小弟献上一点技巧。

文章参考：https://blog.csdn.net/zyw_anq...

欢迎转载，转载请注出处！https://segmentfault.com/a/11...

云服务器服务器托管组件之间通信 asp组件获取mac 如何获取用户mac地址 iOS获取Mac地址

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103957.html

vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0
vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

sf190404 2019-08-29 16:09 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

stormjun 2019-08-23 10:24 评论0 收藏0