ホームページ > 記事 > ウェブフロントエンド > Vue コンポーネントの通信実践の概要

Vue コンポーネントの通信実践の概要

不言オリジナル: 2018-06-30 17:28:081427ブラウズ

この記事は主に Vue コンポーネント通信の実践記録を紹介します (推奨) とても良い内容なので、参考にさせていただきます。

コンポーネント通信

ほぼすべての mvvm フレームワークには、コンポーネント通信の機能が含まれています (ノックアウトについて文句を言いますが、結局のところ、ノックアウトは元祖なので、それについては触れません)。そして、現在のフロントエンドの形式から判断すると、コンポーネント化はプロジェクトの基礎です。したがって、適切なフレームワークを選択した後、コンポーネントが増加し続け、ビジネスが複雑になるにつれて、コンポーネント間の通信が特に重要になります。

実践方法

新しいフレームワークの置き換えに伴い、プロジェクトは Avalon から Vue に更新されましたが、以前のビジネスコードとの互換性を保つために、vue の標準プラクティスを直接使用することはできません。まだそれを取得して vue クラスをカプセル化していますが、特定のビジネスはその使用に影響しません。カプセル化のプロセスについては後で説明します。最近使用されている通信方法をまとめましょう。

1. 親コンポーネントは props を通じて子コンポーネントにデータを渡します

vmodel には 2 つの子コンポーネントが含まれています

<p class="w-base">
  <book-component v-bind:bookdata="book"></book-component>
</p>

<p class="base">
  <node-component v-bind:catalog="catalog" ></node-component>
</p>

上記のコードでは、2 つの子コンポーネントが定義されており、データが次を使用して渡されていることがわかります。指定された v-bind ディレクティブを使用すると、子コンポーネントは渡されたデータを受け取ります。

Vue.component(&#39;book-component&#39;, {
 template: tpl,//可以传进来子组件的模板文件
 props: [&#39;book&#39;],
 data: function () {
  return { myBook: this.bookdata }
 }
})

一方向の小道具データを受信した後、初期化用のローカル変数を定義することをお勧めします。

2. 親コンポーネントと子コンポーネントの間で通信するその他の方法

Vue は、インスタンス $children と $refs 、および $parent で使用できる 3 つの API を提供します。

$children : 現在のインスタンスの直接の子コンポーネント。 $children は順序を保証せず、応答性もないことに注意してください。 $children ：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。

$refs ：包含了当前实例所有拥有 ref 注册的子组件的对象.

$parent

$refs : 現在のインスタンスの ref に登録されているすべての子コンポーネントを含むオブジェクト

$parent: 現在のインスタンスの親インスタンス。

つまり、コンポーネントが通信の観点から子コンポーネントを呼び出したい場合、使用できる唯一のメソッドは $refs です。これは、$children が配列であり、順序が保証されず、それに関連する ID がないためです。必要な特定のサブコンポーネントを見つけます。ただし、$refs を使用して特定のサブコンポーネントを検索する場合は、そのサブコンポーネントの ref を登録する必要があります。

親コンポーネントのテンプレート

<!-- vm.$refs.child will be the child comp instance -->
<child-component ref="child"></child-comp>

親コンポーネント

//找到子组件并且调用它的方法
var myChild = this.$refs.child;
mymyChild.func();

子コンポーネント

//找到父组件并且调用它的方法
var myParent = this.$parent;
mymyChild.func();

3. 並列コンポーネント間の2つの通信方法

a.公式提供イベントバス

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit(&#39;id-selected&#39;, 1)
// 在组件 B 创建的钩子中监听事件
bus.$on(&#39;id-selected&#39;, function (id) {
 // ...
})

b. 親コンポーネントを通じて兄弟コンポーネント

を検索します。実際、上記の 2 つのメソッドのベストプラクティスは、それらをプロジェクトの基本クラスにカプセル化することです。毎回行う必要はありません。空の Vue() インスタンスを定義するには、各インスタンスの基本クラスにこのイベントバスがあります。他の兄弟コンポーネントを見つけるメソッドもカプセル化できますが、兄弟コンポーネントは ref を登録する必要があります

次のメソッドは、親コンポーネントを見つけてから兄弟コンポーネントを見つけるためにプロジェクト内でカプセル化したメソッドです。

//找到父组件的$refs对象，然后找到组件的兄弟组件
 var $refs = this.$parent?this.$parent.$refs:{};
 var childComponent = $refs.child; //child为改组件的ref属性值

//平行组件之间的通信
getComponentByRef: function(refId) {
  var $refs = this.$parent?this.$parent.$refs:{};
  for (var $id in $refs) {
    if ($id == refId) {
      return $refs[$id];
    }
  }
  return null;
}

4. コンポーネント間の複雑なデータ通信 Vuex

vue を初めて使用する人の多くは、実際、vuex の使用を積極的に避けます。、それは想像されているほど複雑ではありません。まずは、vuex の導入後に示される小さな例を見てみるのが最適です。しかし、プロジェクトが複雑でない場合は、状態管理を考慮する必要はありません。では、どのような場合に状態管理を使用する必要があるのでしょうか?

そのようなレイアウトを見てみましょう

component1の特定のデータが変更されると、それに応じてcom2とcom3も更新されます。このとき、com3は3つの小さなコンポーネントに細分化されます。

問題:

同じ状態に依存しようとする複数の試行
多層のネストされたコンポーネントにより、データの変更とコードのメンテナンスが困難になります

そのような状況では、状態管理の使用を検討できます。次の記事では、vuex の実践と理解について詳しく説明します。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

Vue コンポーネントの通信実践の概要

関連記事