例Vueのプロジェクト伝統的な価値観の兄弟

こんにちは、誰もが、今日は私たちの兄弟間の伝統的な価値観のVueのプロジェクトの例を与えるために、コンポーネント間の親子コミュニケーションはここでは説明しません、比較的簡単です。

次のようにプロジェクトの要件であると仮定すると：

左上の図のボタンがありますが、私たちのニーズがクリックされたときに以下に示すように、ナビゲーション・サイドバーには、メインインターフェイスを縮小して拡大します

VUEプロジェクトはコンポーネントベースであるので、構成要素間の価値の通過のための需要があるため、以下では、特定のオペレーションコードです。

1.まず、プロジェクトファイルのパスJSここに名前のbyval.jsをSRCを作成し、次のコードは、ファイルに書き込まれます。

/ * JSLint esversion：6 * / 
からインポートビュー '表示' 。
輸出デフォルト 新しいビュー（）;

（ナビゲーションボタンをクリックして収縮を含む）ヘッドアセンブリ2.現在のナビゲーションサイドバーサイド・ナビゲーション・インターフェースと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プロジェクトの兄弟は、お読みいただきありがとうございました

例Vueのプロジェクト伝統的な価値観の兄弟

おすすめ