Vuejs 用$emit與$on來進行資料傳輸通訊

阿新 • • 發佈：2019-01-29

Vuejs 用$emit與$on來進行兄弟元件之間的資料傳輸通訊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vue2-單一事件管理元件通訊</title>
  <script src="vue.js"></script>
  <script type="text/javascript">

  //準備一個空的例項物件
  var Event = new Vue();

  //元件A
  var 
 A = {
    template: `
      <div>
        <span>我是A元件的資料->{{a}}</span>
        <input type="button" value="把A資料傳給C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("a-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是a元件中資料" 

      }
    }
  };
  //元件B
  var B = {
    template: `
      <div>
        <span>我是B元件的資料->{{a}}</span>
        <input type="button" value="把B資料傳給C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("b-msg", this.a);
      }
    },
    data () {
      return 
 {
        a: "我是b元件中資料"
      }
    }
  };
  //元件C
  var C = {
    template: `
      <div>
        <h3>我是C元件</h3>
        <span>接收過來A的資料為: {{a}}</span>
        <br>
        <span>接收過來B的資料為: {{b}}</span>
      </div>
    `,
    mounted () {
      //接收A元件的資料
      Event.$on("a-msg", function (a) {
        this.a = a;
      }.bind(this));

      //接收B元件的資料
      Event.$on("b-msg", function (a) {
        this.b = a;
      }.bind(this));
    },
    data () {
      return {
        a: "",
        b: ""
      }
    }
  };
  window.onload = function () {
    new Vue({
      el: "#box",
      components: {
        "dom-a": A,
        "dom-b": B,
        "dom-c": C
      }
    });
  };


  </script>
</head>
<body>
  <div id="box">
    <dom-a></dom-a>   
    <dom-b></dom-b>   
    <dom-c></dom-c>   
  </div>

</body>
</html>

Vuejs 用$emit與$on來進行跨頁面之間的資料傳輸通訊

on和emit的事件必須是在一個公共的例項上，才能觸發。

新建bus.js
import Vue from 'vue'

export var bus = new Vue()
App.vue裡created方法裡定義事件
import { bus } from 'bus.js'
// ...
created () {
  bus.$on('tip', (text) => {
    alert(text)
  })
}
Test.vue元件內呼叫
import { bus } from 'bus.js'
 // ...
bus.$emit('tip', '123')

Vuejs 用$emit與$on來進行資料傳輸通訊

Vuejs 用$emit與$on來進行兄弟元件之間的資料傳輸通訊 <!DOCTYPE html> <html lang="en"> <head> <me

Vuejs 用$emit 與 $on 來進行兄弟元件之間的資料傳輸

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-單一事件管理元件通訊</title> &

從WS查出的 RESULT 來進行資料格式轉換組裝成MAP

IPoApplyWsProxy proxy = new IPoApplyWsProxy(); String result = proxy.getCheckerConfigList(json.toString()); JSONObject j

HttpClient +Testng(2)使用testng的DataProvicer來進行資料驅動

在FirstTest.java 檔案中，我們可看到請求URL、請求引數，這些都是屬於測試資料。這裡我們使用testng中自帶的@DataProvider註解來做資料驅動，資料來源檔案可以是EXCEL，XML，甚至可以是TXT文字。這裡我們使用EXCEL資料來源。 1、大概

Android手機通過wifi進行資料傳輸（二）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

Netty整合SpringBoot並使用Protobuf進行資料傳輸

<build> <extensions> <extension> <groupId>kr.motd.maven</groupId>

extjs 使用Ext.Ajax.request進行資料傳輸

java程式碼 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Aut

Flume Avro 兩臺機器間進行資料傳輸的方式

flume 通過avro方式在兩臺機器之間進行資料傳輸比如要在192.168.17.18 上把資料傳到 192.168.17.17 1 首先要再兩臺機器上都部署 flume 2 在 17 flume下這樣配置 avro-flume.conf agent3.channel

樹莓派3b與電腦串列埠互相通訊進行資料傳輸的配置過程

我們經常需要用串列埠來互發訊息，但是樹莓派的串列埠不像微控制器那樣，稍微有點麻煩。本文參考彙總網上的關於樹莓派串列埠相關資料，快速設定好串列埠。參考連結:1.https://blog.csdn.net/qq_31396093/article/details/58640

使用python實現http及ftp服務進行資料傳輸

伺服器之間的http資料傳輸直接使用python內建的http服務： python -m SimpleHTTPServer 8000 此時，輸入指令的目錄就已經開啟了http服務，8000為埠（如不指定，預設為8000），如果我們需要在其他機器下垃取該目錄下的檔案，只需在目

主機windows系統，虛擬機器linux系統與工控屏arm-linux之間使用tftp進行資料傳輸

1.保證三個系統之前能互相ping 通 2.開啟windows系統，linux系統的tftp－server windows使用tftp32工具。 linux 使用參考以下文章：重啟xinetd服務： [email protected]:~$ sudo /etc/i

Android使用Socket(Tcp/Udp)協議進行資料傳輸(傳輸大檔案)

Socket是什麼：所謂Socket 通常也稱作”套接字”，用於描述IP地址和埠，是一個通訊鏈的控制代碼。應用程式通常通過”套接字”向網路發出請求或者應答網路請求。Socket內部又有兩種協議（Tcp/Udp）,我們來說說其各自的特點。先來說說網路程式設

SpringBoot整合Netty並使用Protobuf進行資料傳輸(附工程)

前言本篇文章主要介紹的是SpringBoot整合Netty以及使用Protobuf進行資料傳輸的相關內容。Protobuf會簡單的介紹下用法，至於Netty在之前的文章中已經簡單的介紹過了，這裡就不再過多細說了。 Protobuf 介紹 protocolbuffer(以下簡稱PB)是google 的一種資

使用 JSON 進行資料傳輸

掌握了 JSON 格式之後，在 JavaScript 中使用它就很簡單了。JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 資料不需要任何特殊的 API 或工具包。將 JSON 資料賦值給變數例如，可以建立一個新的 JavaScript 變數，然後將 JSO

Activity間通過廣播形式動態進行資料傳輸

作者:江蘇科技大學機械工程學院趙長金一、Android廣播機制介紹廣播機制最大的特點就是傳送方並不關心接收方是否接到資料，也不關心接收方是如何處理資料的。 Android中廣播的是作業系統中產生的各種各樣的事件。例如，收到一條簡訊就會產生一個收到簡訊息的事件。而Android作業系統一旦內部產生了這

用nc命令來進行檔案傳輸

從官博上轉載過來，很有用的一個小技巧工作中，由於開發機與線上機器分屬不同的機房，需要跳板機進行登入，而跳板機的scp功能貌似受限，導致線上和線下機器傳輸資料非常麻煩，速度還較慢。得高手指點，nc也可用於檔案傳輸，且不依賴於scp。用法很簡單： 1、從跳板機傳檔

Webservice採用什麼協議進行資料傳輸？

WebService使用的是SOAP(Simple Object Access Protocol)協議。WebService使用SOAP協議實現跨程式語言和跨作業系統平臺。WebService採用HTTP協議傳輸資料，採用XML格式封裝資料（即XML中說明呼叫遠端服務物件的哪

使用JSON進行資料傳輸的總結

四、Struts 2 中使用Json ajax 支援 JSON 外掛提供了一種名為json 的ResultType ，一旦為某個Action 指定了一個型別為json 的Result ，則該Result 無需對映到任何檢視資源。因為JSON 外掛會負責將Action 裡的狀態資訊序列化成JSON 格式的資料

Ajax：使用 JSON 進行資料傳輸

在非同步應用程式中傳送和接收資訊時，可以選擇以純文字和 XML 作為資料格式。本文討論另一種有用的資料格式 JavaScript Object Notation(JSON)，以及如何使用它更輕鬆地在應用程式中移動資料和物件…… 許多非同步應用程式中如何恰當地使用純文字和簡

用Vue來進行移動Hybrid開發和客戶端間資料傳輸的一種方法

如果大家覺得有用，更多的模組請點選檢視即上一篇Vue 頁面狀態保持頁面間資料傳輸的一種方法,今天我們說說我們團隊是怎麼和客戶端進行互動。為什麼到了今天，還要提hybrid開發，就我所在團隊從中獲得的好處有：團隊較小、業務較重、迭代頻繁、需要緊急響應的團隊和專案比較適合用使用單頁應用技術

Vuejs 用$emit與$on來進行資料傳輸通訊

Vuejs 用$emit與$on來進行兄弟元件之間的資料傳輸通訊

Vuejs 用$emit與$on來進行跨頁面之間的資料傳輸通訊

相關推薦