快捷導(dǎo)航

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

更新時間：2017年02月23日 16:03:54 作者：LiuYier

本篇文章主要介紹了Vuejs 用$emit 與 $on 來進行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實用價值，需要的朋友可以參考下。

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

<!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>
        <h3>我是C組件</h3>
        <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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在Vue.js中使用Mixins的方法
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下
2017-09-09
vue和thymeleaf相結(jié)合的注意事項詳解
這篇文章主要介紹了vue和thymeleaf相結(jié)合的注意事項詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue3實現(xiàn)旋轉(zhuǎn)圖片驗證
這篇文章主要為大家詳細介紹了vue3實現(xiàn)旋轉(zhuǎn)圖片驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue?懶加載組件chunk相對路徑混亂問題及解決
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解Vue 如何監(jiān)聽Array的變化
這篇文章主要介紹了詳解Vue 如何監(jiān)聽Array的變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
vue3 onMounted異步函數(shù)同步請求async/await實現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請求async/await實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
Vue實現(xiàn)簡單彈窗效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源
本篇文章主要介紹了詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法的相關(guān)資料,需要的朋友可以參考下
2017-05-05
vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式
這篇文章主要介紹了vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04