Vue コンポーネントで値を渡す 5 つの方法とは何ですか?

vue コンポーネントで値を渡す 5 つの方法: 1. 親コンポーネントが子コンポーネントに値を渡す; 2. 子コンポーネントが親コンポーネントに値を渡す; 3. 隣接する兄弟コンポーネント間でパラメータを渡す; 4. パラメータは遠く離れた兄弟コンポーネント間で渡されます; 5. EventBus パラメータが渡されます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue の通信メソッドはパラメータ渡しメソッドとも言えます:

• 親コンポーネントが子コンポーネントに値を渡します:

• サブコンポーネントは親コンポーネントに値を渡します:

• 隣接する兄弟コンポーネント (兄弟) 間でパラメータを渡します

• からパラメータを渡します遠い兄弟 (いとこ)

• EventBus によるパラメータの受け渡し
  

1. 父から息子へのパラメータの受け渡し

原則: 親は子を制御します。子コンポーネントの props 属性を通じて、子コンポーネントのカスタム label 属性をスローして、親コンポーネントの動作ステータスを受け取ります。
例: 親コンポーネントのボタンは、コンポーネントの表示と非表示を制御します。子コンポーネントの p

     
    
 父按钮 
   
     

効果:

2. 親から子へのパラメータの受け渡し

原則: 子は、親コンポーネントであり、子コンポーネントはカスタム イベントをバインドします。親コンポーネントのメソッド関数を処理するには、.$emit('カスタム イベント',[パラメータ])
を通じて独自のカスタム イベントをトリガーします。例: 子コンポーネントのボタン親コンポーネントの p を制御します。 Hide

Effect:

3. 隣接する兄弟 (兄弟) からパラメータを渡す

原則:パブリック親を介して要素はブリッジ (インスタンス コンポーネント) として機能し、親子 props パラメーターの受け渡しと子親カスタム イベントと組み合わせて機能します。

例: c1 と c2 は兄弟です。c1 は表示と非表示を制御できます。 c2

     
   
 父级状态 
{{state}}
 
  
  
      

効果 ：

4. 遠い兄弟 (いとこ) からパラメータを渡す

原則: 中間オブジェクトを作成することによってインスタンスを作成し、イベントを登録する場合、制御コンポーネントでは、実行される機能はイベントを通じて実行され、メイン制御コンポーネントでは、対応する操作がイベントを通じて変更されます。 #

クリック前:

##5。パラメータを渡す EventBus

1. main.js にグローバル EventBus をマウントします

Vue.prototype.$EventBus = new Vue()

2.A コンポーネント

ログイン後にコピー

3.B コンポーネント

グローバル Vue オブジェクトをマウントしてパラメータを渡します。

関連する推奨事項:「

」

以上がVue コンポーネントで値を渡す 5 つの方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。