成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

zorpan / 3020人閱讀

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

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

上一位同事在寫的時(shí)候把寫在index.html文件中，獲取mac地址的js代碼也寫在了index.html中，讀取完之后保存在localStorage里面，但是這里有個(gè)問(wèn)題，這個(gè)Activex控件獲取mac地址是一個(gè)異步操作，如果第一次獲取mac地址并且緩存沒(méi)有mac地址的信息，必定會(huì)報(bào)錯(cuò)。

這次修改的關(guān)鍵點(diǎn)就是如何將這個(gè)異步操作變成同步操作，或者當(dāng)控件獲取到mac之后傳播到組件里，組件再做相對(duì)應(yīng)的動(dòng)作。

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

既然找到關(guān)鍵點(diǎn)，那么就來(lái)解決問(wèn)題吧！

我們都知道vue組件里通信有幾個(gè)辦法：

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

父 -> 子組件通信：子組件定義props，父組件使用子組件時(shí)通過(guò)props向子組件傳值；

兄弟組件或者平行組件：定義一個(gè)eventBus，引入eventBus，通過(guò)eventBus的$on和$emit來(lái)通信；

如果項(xiàng)目比較大，推薦使用vuex來(lái)通信。

上面的方法，在index.html中貌似都用不上...除非將它們綁在window對(duì)象上...

所以變通一下,

在main.js文件中： 
window.eventBus = new Vue();

接下來(lái)我們?cè)趇ndex.html中的script標(biāo)簽打印下eventBus：

很好，能打印出來(lái)就行。

index.html文件,在body標(biāo)簽里插入：
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"); // 關(guān)閉上一次的監(jiān)聽(tīng)
  eventBus.$on("getMac", (_mac) => {
    alert(`獲取MAC地址：${_mac}`);
    this.msg = _mac;
  });
}

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

成功！

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

下面是第二種方法：

怎么在index.html中給組件賦值呢？或者說(shuō)怎么調(diào)用組件里的方法呢？

利用同樣的原理，將this綁定到window上就可以了。

上代碼，

組件： 
clickPort() {
  var userAgent = navigator.userAgent;
  window.thisComponent = this; // 將組件實(shí)例賦予一個(gè)全局變量
  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：

運(yùn)行一把：

沒(méi)毛病，并且直接在模板里展示出來(lái)；

使用第二種方法，需要在組件的data函數(shù)中初始化sMacAddr字段，否則不會(huì)在模板中展示出來(lái)，并且在index.html文件中window.thisComponent.sMacAddr，這里的sMacAddr字段必須跟組件里初始化的字段一致

總結(jié)：

在這無(wú)論用哪個(gè)方法，都得利用到window這個(gè)對(duì)象；這個(gè)也是沒(méi)辦法的事，其實(shí)利用同樣的道理，也是直接綁定在VUE的實(shí)例上；
條條大路通羅馬，小弟獻(xiàn)上一點(diǎn)技巧。

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

歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注出處！https://segmentfault.com/a/11...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103957.html

相關(guān)文章

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

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

    BicycleWarrior 評(píng)論0 收藏0

  • vue面試

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

    vspiders 評(píng)論0 收藏0

  • vue組件通信全面總結(jié)

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

    余學(xué)文 評(píng)論0 收藏0

  • 微信小程序?qū)W習(xí)與wepy框架的使用詳解

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

    sf190404 評(píng)論0 收藏0

  • 微信小程序?qū)W習(xí)與wepy框架的使用詳解

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

    stormjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<