vue.js のコンポーネント データ フローの問題の解決策

この記事では、主に vue.js コンポーネントのデータ フローに関する問題を紹介します。編集者はそれが非常に優れていると考えたので、皆さんに共有し、参考にしてもらいます。エディターをフォローして見てみましょう

1. コンポーネント

コンポーネントは、現代のフロントエンド フレームワークの重要な部分であると言えます。コンポーネントを使用すると、コードの再利用率や開発者の開発効率が大幅に向上するだけでなく、その後のコードのメンテナンスにも大きな意味があります。フロントエンド開発では、歴史的な理由から、WebComponent は使いやすいものの、多くの新しいフロントエンド テクノロジと同様に、その開発は非常に制限されています。このような状況を踏まえ、賢明な開発者は、フレームワーク内に対応する機能を統合することでコンポーネント化を完了しようとします。さまざまな最新のフロントエンド フレームワークは、基本的に独自の実装を持っています。ここでは、データの流れに焦点を当てて、vue のコンポーネントを分析します。

2. Vue コンポーネント

Vue コンポーネントは、テンプレートを作成するときに、jsx やハンドルバーなどの特別な構文を学ぶ必要がないため、比較的学習コストが低くなります。より簡単に始めましょう。 vue コンポーネントを使用する場合、通常、コンポーネントの登録とコンポーネントの呼び出しの 2 つの部分に分かれます。

(1) コンポーネントの登録

Vue.component('pop-box', {
  template:  &#39;<p class="component-box">\
    <p class="component-content">\
    ..........
    </p>\
  </p>&#39;,

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

もちろん、Vue.component メソッドを使用すると、インスタンスまたはコンポーネント内にローカル コンポーネントを簡単に登録することもできますが、原理は似ています。 。 Vue.component の最初のパラメータは、コンポーネントの名前、または後続の呼び出しでこの名前を使用してコンポーネントを呼び出します。2 番目のパラメータは、通常、テンプレート (テンプレート) であるコンポーネント キーを含みます。データ (データ、計算されたもの)、メソッド (メソッド)、フック関数 (作成されたもの、マウントされたもの...) などの情報が内部で保持されます。

注目に値します:

1. コンポーネント内のデータは関数である必要があり、その戻り値は実際の「データ」として使用されます。

2. vue1.x と vue2 のフック関数。 x は若干異なります。フック関数が有効にならない場合は、必ず vue のバージョンを確認してください。

(2) コンポーネント呼び出し

(1) 開始タグ+終了タグモード

<pop-box text="200" v-bind:number="200"></pop-box>

(2) 終了タグなしモード

<pop-box text="200" v-bind:number="200" />

vue コンポーネントの呼び出しには、上記の 2 つのモードがあります。スロットを使用しない場合、実際には 2 つのモードに違いはありませんが、スロットを使用する必要がある場合は、開始タグと終了タグの両方を含むモードのみを使用できます。

上記のデータをバインドするとき、値が数値であるか文字列であるかに関係なく、プロパティは最終的に文字列型であることに注意してください。数値型にしたい場合は、v-bind:property="value" の形式、または :property="value" と省略形を使用します。

3. Vue コンポーネントのデータ フロー

vue は、一般的な一方向のデータ フローの原則に従います。つまり、データは常に親コンポーネントから子コンポーネントに渡され、子コンポーネントは独自のデータ フローを持つことができます。ただし、開発者がこれを実行しようとすると、Vue はエラーを報告します。この利点は、複数の子コンポーネントが親コンポーネントの状態を変更しようとするのを防ぎ、この動作の追跡を困難にすることです。 vue での具体的な実装方法は次のとおりです。

親コンポーネントは props をバインドすることでデータを子コンポーネントに渡しますが、子コンポーネント自体には、これらのデータを変更したい場合に変更する権限がありません。 、変更できるのはこの 1 つだけです。動作はイベントを通じて親コンポーネントに報告され、親コンポーネント自体がデータの処理方法を決定します。

(1) 簡単な例

<p id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</p>
...
Vue.component(&#39;my-counter&#39;, {
  template:  &#39;<p class="counter">\
    <p>{{counter}}</p>\
    <button @click="inc">increase</button>\
  </p>&#39;,

  props: [&#39;counter&#39;],

  methods: {
    inc: function () {
      this.$emit(&#39;inc&#39;);
    }
  }
});

var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

より簡単にするために、子コンポーネントとして vue のインスタンスを 1 つだけ作成します。

(2) データフロー分析の分析

(1) 親コンポーネントで counter というデータを定義します。
(2) コンポーネントを呼び出すときに、:counter="counter" を介して親コンポーネントのカウンターを子コンポーネントに渡します。 3) サブコンポーネントはカウンターを読み取り、テンプレートに表示します。
(4) ユーザーがボタンをクリックすると、カウンターを増やす必要があります。
(5) サブコンポーネントはこのイベントをリッスンしますが、代わりに、 this.$emit('inc'); を使用して、親コンポーネントに追加する必要があるイベントをカスタム イベントの形式で報告します。 「増加」が実行され、サブコンポーネントによって報告されたイベントを監視し、独自の増加メソッドでカウンターを増やすことができます。
(7) 親コンポーネントのデータが更新されると、サブコンポーネントのデータも更新されます。インターフェイスのコンテンツも同時に更新され、このプロセスはフレームワークによって自動的に完了します。

(3) 概要

上記の例は基本的に vue の主要なデータ フローの方向を完全に示していますが、この prop/evnet ベースのメソッドは、直接の親子関係を持つコンポーネント、兄弟コンポーネント、またはコンポーネントにのみ適しています。コンポーネントのデータ フローがこの方法に基づいている場合、現時点では、より強力な状態管理モデルの使用を検討できます。

以上がvue.js のコンポーネント データ フローの問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。