vue項目中，index.html數(shù)據(jù)與組件之間通信，傳值，以獲取MAC地址為例

zorpan 發(fā)布于2019-08-23 17:11 / 2995人閱讀

摘要：最近在項目里接手別人的代碼來做完善，其中一個是修復獲取不到地址的，仔細看了下代碼，發(fā)現(xiàn)需要用到控件。所以，演變成文件的數(shù)據(jù)如何跟組件通信。

最近在項目里接手別人的代碼來做完善，其中一個是修復獲取不到MAC地址的bug，仔細看了下代碼，發(fā)現(xiàn)需要用到Activex控件。

上一位同事在寫的時候把寫在index.html文件中，獲取mac地址的js代碼也寫在了index.html中，讀取完之后保存在localStorage里面，但是這里有個問題，這個Activex控件獲取mac地址是一個異步操作，如果第一次獲取mac地址并且緩存沒有mac地址的信息，必定會報錯。

這次修改的關鍵點就是如何將這個異步操作變成同步操作，或者當控件獲取到mac之后傳播到組件里，組件再做相對應的動作。

所以，演變成index.html文件的數(shù)據(jù)如何跟組件通信。

既然找到關鍵點，那么就來解決問題吧！

我們都知道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"); // 關閉上一次的監(jiān)聽
  eventBus.$on("getMac", (_mac) => {
    alert(`獲取MAC地址：${_mac}`);
    this.msg = _mac;
  });
}

ok，來執(zhí)行一把：

成功！

以上是第一種方法，利用的是eventBus，記住在使用eventBus的時候，記得關閉上一次的監(jiān)聽

下面是第二種方法：

怎么在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函數(shù)中初始化sMacAddr字段，否則不會在模板中展示出來，并且在index.html文件中window.thisComponent.sMacAddr，這里的sMacAddr字段必須跟組件里初始化的字段一致

總結：

在這無論用哪個方法，都得利用到window這個對象；這個也是沒辦法的事，其實利用同樣的道理，也是直接綁定在VUE的實例上；
條條大路通羅馬，小弟獻上一點技巧。

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

歡迎轉載，轉載請注出處！https://segmentfault.com/a/11...

GPU云服務器云服務器組件之間通信 asp組件獲取mac 如何獲取用戶mac地址 iOS獲取Mac地址

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103957.html

vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數(shù)據(jù)驅動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；View 代表UI視圖，負責數(shù)據(jù)的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
vue組件通信全面總結

摘要：當一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內部組件在創(chuàng)建高級別的組件時非常有用。寫在前面組件間的通信是是實際開發(fā)中非常常用的一環(huán)，如何使用對項目整體設計、開發(fā)、規(guī)范都有很實際的的作用，我在項目開發(fā)中對此深有體會，總結下vue組件間通信的幾種方式，討論下各自的使用場景文章對相關場景預覽父->子組件間的數(shù)據(jù)傳遞子->父組件間的數(shù)據(jù)傳遞兄弟...

余學文 2019-08-23 12:16 評論0 收藏0
微信小程序學習與wepy框架的使用詳解

摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發(fā)過程中用到和總結的經(jīng)驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視，也就形成了咱們開...

sf190404 2019-08-29 16:09 評論0 收藏0
微信小程序學習與wepy框架的使用詳解

摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發(fā)過程中用到和總結的經(jīng)驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視，也就形成了咱們開...

stormjun 2019-08-23 10:24 評論0 收藏0