コンポーネント通信の概念:
親から子へ 親は
子要素を呼び出し、子要素のプロパティを通じてデータを渡します。
親コンポーネントは属性を渡し、子コンポーネントは props を通じてそれを受け取ります。この属性は、子コンポーネントで this.xxx の方法で使用できます。
子は、props を通じて対応するデータを内部的に受け取ります。
息子の父親
子コンポーネントは $emit (カスタム イベント名、パラメーター) を介して親コンポーネントにカスタム イベントを送信し、親コンポーネントのプロパティがイベントをリッスンし、子コンポーネントから渡された値を取得できます
。 vue のデフォルトは one-way flow で、親から子に直接渡すことのみが可能ですが、子から親に直接変更することはできません。
理由: 親のデータは特定の子だけが使用するとは限らず、他の子も使用する可能性があり、子が親のデータを自由に変更できる場合、データの混乱が生じやすいためです。
解決策: 子がデータを変更したい場合は、子は親に通知する必要があります。通知を受け取った後、親はデータを変更するかどうかを決定します。これは、典型的な息子から親への方法です。
各コンポーネントには独自のスコープがあり、コンポーネント間でデータを共有することはできませんが、実際の開発作業ではコンポーネント間でデータを共有する必要があることが多く、コンポーネント間で通信することもコンポーネント通信の目的です。 、有機的な完全なシステムを形成するように。
コンポーネント通信方式
親から子へ: データを転送する小道具
親コンポーネントの動的カスタム プロパティを通じてデータを渡します。
親コンポーネント:
サブアセンブリ:
子供から父親へ: $emit 送金
サブコンポーネントの $emit を介してカスタム イベントを渡し、その後に渡されるパラメーターを渡します
サブアセンブリ:
親コンポーネント:
- サブコンポーネントはカスタム イベントを渡し
$emit触发
、$emit
2 番目のパラメータは渡された値です - 親コンポーネントはリスナーをバインドして、子コンポーネントから渡されたパラメータを取得します。
ブラザーパス値 $Bus ミドルウェア:
1.vueプロジェクトのsrcディレクトリに新しいjsファイルを作成します(ファイル名:bus.js)
2.bus.jsにVueのインスタンスをインポートしてエクスポートする
3. バスで移動.$emit
4.bus.$onを使用してこのイベントの受信、パラメータの受信、マウント前後の受信を行います。