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

この記事は主に 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('book-component', {
 template: tpl,//可以传进来子组件的模板文件
 props: ['book'],
 data: function () {
  return { myBook: this.bookdata }
 }
})

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

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

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

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

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

$parent

<!-- 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();

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

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

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

//找到父组件的$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

問題:

1. 同じ状態に依存しようとする複数の試行

2. 多層のネストされたコンポーネントにより、データの変更とコードのメンテナンスが困難になります

Vue2.0 マルチタブ切り替えコンポーネントのパッケージ化の紹介

Vue のリクエストインターセプターの追加と vue-resource interceptor の使用

以上がVue コンポーネントの通信実践の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。