Vuejs用$emit與$on來進行兄弟組件之間的數(shù)據(jù)傳輸通信

最近在學(xué)習(xí)vue組件雞組件之前通信問題，正好看到，以此來留作筆記。

廣平網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

<!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組件的數(shù)據(jù)->{{a}}</span>
        <input type="button" value="把A數(shù)據(jù)傳給C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("a-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是a組件中數(shù)據(jù)"
      }
    }
  };
  //組件B
  var B = {
    template: `
      <div>
        <span>我是B組件的數(shù)據(jù)->{{a}}</span>
        <input type="button" value="把B數(shù)據(jù)傳給C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("b-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是b組件中數(shù)據(jù)"
      }
    }
  };
  //組件C
  var C = {
    template: `
      <div>
        <h4>我是C組件</h4>
        <span>接收過來A的數(shù)據(jù)為: {{a}}</span>
        <br>
        <span>接收過來B的數(shù)據(jù)為: {}</span>
      </div>
    `,
    mounted () {
      //接收A組件的數(shù)據(jù)
      Event.$on("a-msg", function (a) {
        this.a = a;
      }.bind(this));

      //接收B組件的數(shù)據(jù)
      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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：Vuejs用$emit與$on來進行兄弟組件之間的數(shù)據(jù)傳輸通信
文章起源：http://bm7419.com/article2/pcoeoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、微信小程序、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計公司、服務(wù)器托管、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司