Vue コンポーネント間で通信するにはどのような方法がありますか?

方法: 1. 共通の祖先「$parent」または「$root」を通じて通信します; 2. 親コンポーネントは子コンポーネントの参照を設定することによって通信します; 3. 兄弟コンポーネントは 2 番目の「$emit」イベントを通じてカスタマイズをトリガーします"$emit" のパラメータは渡された値であり、別の兄弟コンポーネントは "$on" を通じてカスタム イベントをリッスンします。

#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

Vue コンポーネント間の通信方法とは

1. コンポーネント間の通信の概念

始める前に

Component

Communication

コンポーネントが vue の最も強力な機能の 1 つであることは誰もが知っています。 vue in vue それはコンポーネントです

コミュニケーションとは、ある目的を達成するために、送信者が特定のメディアやフォーマットを通じて受信者に情報を送信することを指します。広い意味では、あらゆる情報トラフィックは通信です

コンポーネント間通信とは、コンポーネント (.vue) が特定の目的を達成するために特定の方法で情報を渡すことを意味します

例:

UI フレームワークでテーブル コンポーネントを使用する場合、テーブル コンポーネントにデータを渡すことがあります。これは基本的にコンポーネント間の通信を形成します。

2. コンポーネント 相互に作用するものコミュニケーションは解決しますか?古代、人々は旅館、空飛ぶハト、ビーコン火災警報器、記号、言語、目、触覚などを通じて情報を伝達していました。科学技術の進歩により、通信は有線か無線で完結するのが基本であり、有線電話、固定電話、無線電話、携帯電話、インターネット、さらにはテレビ電話など、さまざまな通信手段が次々と登場しています。上の段落を見ると、コミュニケーションの本質は情報の同期と共有であることがわかります。

#vue に戻ると、各コンポーネントには独自のスコープがあり、コンポーネント間でデータを共有することはできません

# #しかし、実際には開発作業では、多くの場合、コンポーネント間でデータを共有する必要があります。これはコンポーネント通信の目的でもあります。

#有機的で完全なシステムを形成するために、コンポーネントが相互に通信できるようにするためです

#2. コンポーネント間の通信の分類

コンポーネント間の通信の分類は次のように分類できます。

Fatherと子コンポーネント コンポーネント間の通信

#兄弟コンポーネント間の通信

#祖先と子孫間の通信

• # #非リレーショナル コンポーネント間の通信
• 3. コンポーネント間の通信計画

• 組織 vue の 8 つの一般的な通信ソリューション

#props を介して送信

#$emit を介してカスタム イベントをトリガー

Use ref

• EventBus

• 親またはルート

• 属性とリスナー

• Provide and Inject

#Vuex
• props pass data

該当するシナリオ: 親コンポーネントデータを子コンポーネントに渡します。

• 子コンポーネントは props 属性を設定し、親コンポーネントから受け取るパラメータを定義します。

親コンポーネントは、子コンポーネント タグを使用するときにリテラルを使用します。 value

• Children.vue

  props:{
      // 字符串形式
   name:String // 接收的类型参数
      // 对象形式
      age:{  
          type:Number, // 接收的类型为数值
          defaule:18,  // 默认值为18
         require:true // age属性必须传递
      }
  }

Father.vue コンポーネント

3708ddc39a5de444174a425c8ee2af91

$emit でカスタム イベントをトリガーする

該当するシナリオ: 子コンポーネントが親コンポーネントにデータを渡す

子コンポーネントは、$emit ($emit の 2 番目のパラメーター) を通じてカスタム イベントをトリガーします。リスナーをバインドします。渡された値

親コンポーネントは子コンポーネントから渡されたパラメータを取得します

Chilfen.vue

this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />

ref

親コンポーネントは、子コンポーネントを使用するときに ref を設定します。

親コンポーネントは、子コンポーネントの ref を設定することでデータを取得します。

親コンポーネント

<Children ref="foo" />
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

EventBus

使用シナリオ: 兄弟コンポーネントが値を渡す中央タイム バス EventBus を作成する

兄弟コンポーネントは $emit を通じてカスタム イベントをトリガーし、$emit の 2 番目のパラメーターが渡されます。 value

別の兄弟コンポーネントは、$on

Bus.js

// 创建一个中央时间总线类
class Bus {
  constructor() {
    this.callbacks = {};   // 存放事件的名字
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)

親またはルート

ビルドを通じてカスタム イベントをリッスンします。共通の祖先 $parent または $root

Brother コンポーネント

this.$parent.on('add',this.add)

別の兄弟コンポーネント

this.$parent.emit('add')

attrs とlisteners

を介した海外通信関連の関連付け

適用可能なシナリオ: 祖先が子孫にデータを渡すバッチ アップロード属性 $attrs および $listeners を設定する

プロパティとして認識 (および取得) されないプロパティを親スコープに含める プロパティ バインディング(クラスとスタイルを除く)。

v-bind="$attrs" を渡して内部コンポーネントに渡すことができます

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit(&#39;some-event&#39;, &#39;msg from grandson&#39;)">
{{msg}}
</div>

provide と inject

provide 属性を祖先コンポーネントと戻り値 渡された値

子孫コンポーネントは、injectを通じてコン​​ポーネントによって渡された値を受け取ります

祖先コンポーネント

provide(){
    return {
        foo:'foo'
    }
}

子孫コンポーネント

inject: ['foo'] // 祖先コンポーネントから渡された値を取得します

vuex

適用可能なシナリオ: 複雑な関係を持つコンポーネントのデータ転送

Vuex は共有変数の保存に使用されるコンテナに相当します

state は共有変数の保存に使用されます

getter、ゲッター派生状態を追加できます (ストアに相当)属性)、共有変数の値を取得するために使用されます。

ミューテーションは、状態を変更するためのメソッドを格納するために使用されます。

アクションは状態を変更するメソッドを保存するためにも使用されますが、アクションは突然変異に基づいています。一部の非同期操作を実行するために一般的に使用されます

概要

親子関係のコンポーネント データ転送の場合、転送のために props と $emit を選択するか、ref

を選択できます。

兄弟関係のコンポーネント データ転送は、$bus を選択し、転送に $parent を選択できます。

先祖および子孫コンポーネント データ転送の場合、属性とリスナー、または提供と注入を選択できます。

複雑なリレーションシップ コンポーネントのデータ転送の場合、vuex 変数を介して共有データを保存できます。

[関連する推奨事項: 「vue.js チュートリアル 」]

以上がVue コンポーネント間で通信するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。