vue.js のコンポーネントデータフローの問題の解決策-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-07-26 16:09:39

オリジナル

1280 人が閲覧しました

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

1. コンポーネント

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

2. Vue コンポーネント

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

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

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

  props: [...],

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

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

ログイン後にコピー

もちろん、Vue.component メソッドを使用すると、インスタンスまたはコンポーネント内にローカルコンポーネントを簡単に登録することもできますが、原理は似ています。。 Vue.component の最初のパラメータは、コンポーネントの名前、または後続の呼び出しでこの名前を使用してコンポーネントを呼び出します。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 サイトの他の関連記事を参照してください。