Vue項目中同級組件傳值的例子

大家好，今天給大家帶來Vue項目中同級組件之間傳值的例子，父子組件之間的通信比較簡單，這里不做討論。

假設該項目中的需求如下:

           圖中左上角有一個按鈕，我們的需求是點擊它時，側邊導航欄收縮且主界面放大，如下圖所示   

      

 

      因為vue項目是組件化的，那么就有組件之間傳值的需求了，下面是具體的編碼操作：

       1. 首先在項目的src路徑下創建一個js文件，這里命名為byval.js，在該文件中寫入如下代碼：

/*jslint esversion:6 */
import Vue from 'vue';
export default new Vue();

        2. 在頭部組件中（包含點擊收縮導航欄按鈕）需要傳遞當前是否收縮側邊導航欄的信息給側邊導航欄和主界面兩個組件，所以在頭部文件寫入如下代碼：

import New from "./new.js";

export default {
  data: function() {
    return {
      isToggle: false，      
      // isToggle 是判斷是否收縮導航欄的變量，默認為true表示收縮
    };
  },
  methods: {
    // onToggle是處理按鈕點擊事件的函數
    onToggle: function() {
      // 當點擊時，切換當前狀態
      this.isToggle = !this.isToggle;
      // 觸發 on-toggle-nav 事件並返回當前導航欄的收縮狀態變量
      New.$emit("on-toggle-nav", this.isToggle);
    }
  }
};

  3. 在側邊導航欄組件中，需要接受頭部導航欄傳遞過來的變量，判斷當前是否收縮導航欄，所以在側邊導航欄組件中寫入如下代碼

export default {
    data:{
        toggle:false,
    }
    ,created(){
         // 綁定on-toggle-nav事件，並在事件觸發時，接受頭部組件中傳來的值
         New.$on("on-toggle-nav", data => {
          // 根據頭部中傳來的值更新當前組件中對應的變量
          if (data === false) {
            this.toggle = true;
          } else {
            this.toggle = false;
          }
        });
    }
};

  4. 在主界面中組件中，需要接受頭部導航欄中傳遞過來的變量，判斷當前是否最大化主界面，代碼邏輯和側邊導航欄組件中的是一致的所以不在此贅述。

好了，vue項目中同級組件互相傳值的過程就是這樣啦，謝謝大家的閱讀