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>
      <pre class="brush:php;toolbar:false">data {{ this.$data }}

---

Change Score Score: {{ score }} `, props: ["score"], methods: { changeScore() { this.score = 200; } } })

我们创建了一个 changeScore() 方法，该方法应该在我们按下更改分数按钮后更新分数。当我们这样做时，似乎分数已正确更新，但我们在控制台中收到以下 Vue 警告：

[Vue warn]：避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，根据 prop 的值使用数据或计算属性。正在变异的道具：“score”

正如你所看到的，Vue 告诉我们，如果父级重新渲染，该 prop 将被覆盖。让我们通过使用内置 $forceUpdate() 方法模拟此类行为来测试这一点：

Vue.component('ParentA',{
  template:`
    <div id="parent-a">
      <h2 id="Parent-A">Parent A</h2>
      <pre class="brush:php;toolbar:false">data {{ this.$data }}

Rerender Parent

---

<child-a :score="score"></child-a> `, data() { return { score: 100 } }, methods: { reRender() { this.$forceUpdate(); } } })

CodePen 示例

现在，当我们更改分数，然后按重新渲染父级按钮时，我们可以看到分数从父级返回到其初始值。所以 Vue 说的是实话！

但请记住，数组和对象将影响它们的父对象，因为它们不是被复制，而是通过引用传递。

因此，当我们需要改变子级中的 prop 时，有两种方法可以解决这种重新渲染的副作用。

使用本地数据属性改变 Prop

第一种方法是将 score 属性转换为本地数据属性 (localScore)，我们可以在 changeScore( )方法和模板中：

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

---

Change Score Score: {{ localScore }} `, props: ["score"], data() { return { localScore: this.score } }, methods: { changeScore() { this.localScore = 200; } } })

CodePen 示例

现在，如果我们在更改分数后再次按渲染父项按钮，我们会看到这次分数保持不变。

使用计算属性改变 Prop

第二种方法是在计算属性中使用 score 属性，它将被转换为新值：

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

---

Score: {{ doubleScore }} `, props: ["score"], computed: { doubleScore() { return this.score * 2 } } })

CodePen 示例

在这里，我们创建了一个计算的 doubleScore()，它将父级的 score 乘以 2，然后将结果显示在模板中。显然，按渲染父级按钮不会产生任何副作用。

孩子与家长的沟通

现在，让我们看看组件如何以相反的方式进行通信。

我们刚刚了解了如何改变子组件中的某个 prop，但是如果我们需要在多个子组件中使用该 prop 该怎么办？在这种情况下，我们需要从父级中的源中改变 prop，这样所有使用该 prop 的组件都将被正确更新。为了满足这一要求，Vue 引入了自定义事件。

这里的原则是，我们通知父级我们想要做的更改，父级执行该更改，并且该更改通过传递的 prop 反映。以下是此操作的必要步骤：

1. 在子进程中，我们发出一个事件来描述我们想要执行的更改，如下所示：this.$emit('updatingScore', 200)
2. 在父级中，我们为发出的事件注册一个事件监听器，如下所示：@updatingScore="updateScore"
3. 当事件发出时，分配的方法将更新属性，如下所示：this.score = newValue

让我们探索一个完整的示例，以更好地理解这是如何发生的：

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

---

Change Score Score: {{ score }} `, props: ["score"], methods: { changeScore() { this.$emit('updatingScore', 200) // 1. Emitting } } }) ... Vue.component('ParentA',{ template:` <div id="parent-a"> <h2 id="Parent-A">Parent A</h2> <pre class="brush:php;toolbar:false">data {{ this.$data }} Rerender Parent

---

// 2.Registering