Vue.js コンポーネント間の通信のデザイン パターン

開発者として、私たちは管理しやすく保守しやすく、デバッグやテストも容易なコードを生成したいと考えています。これを実現するために、パターンと呼ばれるベスト プラクティスを採用します。パターンは、特定のタスクを効率的かつ予測可能な方法で達成するのに役立つ実証済みのアルゴリズムとアーキテクチャです。

このチュートリアルでは、最も一般的な Vue.js コンポーネントの通信パターンと、避けるべきいくつかの落とし穴について見ていきます。実生活では、すべての問題に対する唯一の解決策がないことは誰もが知っています。同様に、Vue.js アプリケーション開発にも、すべてのプログラミング シナリオに適用できる普遍的なパターンはありません。各モードには独自の長所と短所があり、特定の使用例に適しています。

Vue.js 開発者にとって最も重要なことは、最も一般的なパターンをすべて理解し、特定のプロジェクトに適切なパターンを選択できるようにすることです。これにより、正確かつ効率的なコンポーネント通信が実現します。

正しいコンポーネント通信が重要なのはなぜですか?

Vue.js などのコンポーネントベースのフレームワークを使用してアプリケーションを構築する場合、目標は、アプリケーションのコンポーネントを可能な限り分離した状態に保つことです。これにより、再利用可能、保守可能、テスト可能になります。コンポーネントを再利用可能にするには、コンポーネントをより抽象的で分離された (または疎結合された) 形式に整形する必要があります。これにより、アプリケーションの機能を損なうことなく、コンポーネントをアプリケーションに追加したり、削除したりできるようになります。

ただし、アプリケーションのコンポーネント間で完全な分離と独立性を達成することはできません。ある時点で、データを交換したり、アプリケーションの状態を変更したりするなど、相互に通信する必要があります。したがって、アプリケーションの機能性、柔軟性、スケーラビリティを維持しながら、この通信を正しく行う方法を学ぶことが重要です。

Vue.js コンポーネント通信の概要

Vue.js では、コンポーネント間の通信には主に 2 つのタイプがあります:

1. 親子および子と親の厳密な関係に基づいた直接的な親子コミュニケーション。
2. コンポーネント間通信。コンポーネント間の関係に関係なく、あるコンポーネントが他のコンポーネントと「通信」できます。

次のセクションでは、適切な例とともに両方のタイプについて説明します。

親子の直接コミュニケーション

Vue.js がそのままサポートするコンポーネント通信の標準モデルは、props とカスタム イベントを通じて実装される親子モデルです。下の画像では、このモデルが動作している様子を視覚的に確認できます。

ご覧のとおり、親は直接の子とのみ通信でき、子は親とのみ直接通信できます。このモデルでは、ピア通信またはコンポーネント間の通信はできません。

次のセクションでは、上の図のコンポーネントを取り上げ、一連の実践的な例で実装します。

親子コミュニケーション

私たちが持っているコンポーネントがゲームの一部だとしましょう。ほとんどのゲームでは、インターフェースのどこかにゲームスコアが表示されます。 Parent A コンポーネントで score 変数を宣言し、それを Child A コンポーネントに表示したいとします。では、どうすればよいでしょうか?

親から子にデータを送信するために、Vue.js は props を使用します。属性を渡すには、次の 3 つの必要な手順が必要です。

次のように子にプロパティを登録します:
1. props: ["score"]
サブテンプレートに登録されている属性を次のように使用します:
2. スコア: {{ スコア }}<span></span>
このプロパティを
3. score 変数 (親テンプレート内) に次のようにバインドします: <child-a :score="score"></child-a>

実際に何が起こっているのかをよりよく理解するために、完全な例を見てみましょう:

リーリー

コードペンの例

検証の小道具

簡潔かつ明確にするために、省略表現を使用してプロップを登録します。ただし、実際の開発では props を検証することをお勧めします。これにより、プロパティが正しいタイプの値を受け取ることが保証されます。たとえば、

score プロパティは次のように検証できます: リーリー

プロップを使用するときは、プロップのリテラル バリアントと動的バリアントの違いを必ず理解してください。プロップを変数にバインドすると、それは動的になります (たとえば、

v-bind:score="score" またはその省略形 :score="score")、 prop の値は変数の値に基づいて変化します。バインドせずに値を入力した場合、値は文字通り解釈され、結果は静的になります。この例では、score="score" と記述すると、100 ではなく score が表示されます。これは文字通りの小道具です。この微妙な違いには注意する必要があります。

サブ属性を更新する

これまでのところ、ゲームのスコアは正常に表示されていますが、ある時点でスコアを更新する必要があります。これを試してみましょう。

Vue.component('ChildA',{
  template:`
    <div id="child-a">
      <h2 id="Child-A">Child A</h2>
      <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data {{ this.$data }}

ログイン後にコピー

ログイン後にコピー