Vue で一般的に使用される 3 つのコンポーネント通信メソッド Props、Emit、Bus...

コンポーネント通信の概念:


親から子へ 親は
子要素を呼び出し、子要素のプロパティを通じてデータを渡します。

親コンポーネントは属性を渡し、子コンポーネントは props を通じてそれを受け取ります。この属性は、子コンポーネントで this.xxx の方法で使用できます。
子は、props を通じて対応するデータを内部的に受け取ります。
息子の父親

子コンポーネントは $emit (カスタム イベント名、パラメーター) を介して親コンポーネントにカスタム イベントを送信し、親コンポーネントのプロパティがイベントをリッスンし、子コンポーネントから渡された値を取得できます
。 vue のデフォルトは one-way flow で、親から子に直接渡すことのみが可能ですが、子から親に直接変更することはできません。
理由: 親のデータは特定の子だけが使用するとは限らず、他の子も使用する可能性があり、子が親のデータを自由に変更できる場合、データの混乱が生じやすいためです。
解決策: 子がデータを変更したい場合は、子は親に通知する必要があります。通知を受け取った後、親はデータを変更するかどうかを決定します。これは、典型的な息子から親への方法です。

各コンポーネントには独自のスコープがあり、コンポーネント間でデータを共有することはできませんが、実際の開発作業ではコンポーネント間でデータを共有する必要があることが多く、コンポーネント間で通信することもコンポーネント通信の目的です。 、有機的な完全なシステムを形成するように。

コンポーネント通信方式

親から子へ: データを転送する小道具

        親コンポーネントの動的カスタム プロパティを通じてデータを渡します。

親コンポーネント:   

 サブアセンブリ:

 子供から父親へ: $emit 送金

         サブコンポーネントの $emit を介してカスタム イベントを渡し、その後に渡されるパラメーターを渡します

 サブアセンブリ: 

親コンポーネント: 

  • サブコンポーネントはカスタム イベントを渡し$emit触发$emit2 番目のパラメータは渡された値です
  • 親コンポーネントはリスナーをバインドして、子コンポーネントから渡されたパラメータを取得します。

ブラザーパス値 $Bus ミドルウェア:

1.vueプロジェクトのsrcディレクトリに新しいjsファイルを作成します(ファイル名:bus.js)

 2.bus.jsにVueのインスタンスをインポートしてエクスポートする

 3. バスで移動.$emit

 4.bus.$onを使用してこのイベントの受信、パラメータの受信、マウント前後の受信を行います。

おすすめ

転載: blog.csdn.net/frelly01/article/details/126089138