Vue はコンポーネント間の通信をどのように実装しますか?

Vue はコンポーネント間の通信をどのように実装しますか?

1. 父と息子のコミュニケーション

最も一般的な通信は父と息子の間で行われ、双方向のデータ転送です。

1.1 親コンポーネント --> 子コンポーネント

親コンポーネントが子コンポーネントにデータを渡す方法は、Prop を介して子コンポーネントにデータを渡すことです。

// 子.vue
<テンプレート>
    <div>
        私は息子で、父から{{value}}としてデータを受け取りました
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具:{
        値: 文字列
    }
}
//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <子:値="x" />
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  データ(){
    戻る {
      x: 'こんにちは、子供'
    }
  },
  コンポーネント:{
    子供
  }
}
</スクリプト>

1.2 子コンポーネント --> 親コンポーネント

子コンポーネントが親コンポーネントにデータを渡す方法は、子コンポーネントの $emit を通じてカスタム イベントをトリガーすることです。子コンポーネントが使用されると、v-on はカスタム イベントをリッスンするようにバインドされます。

ここでの v-on イベント通信は、サブコンポーネントによって使用されるときに、サブコンポーネントのイベント属性として自動的にリッスンされます。

したがって、子コンポーネントは、子コンポーネントが使用するカスタム イベント属性に応じて、親コンポーネントにデータを渡します。

// 子.vue
<テンプレート>
    <div>
        私は息子で、父から{{value}}としてデータを受け取りました
        <button @click="こんにちは">
            親コンポーネントに挨拶しましょう</button>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具:{
        値: 文字列
    },
    方法:{
        こんにちは(){
            this.$emit('sayHi','こんにちは、親御さん!');
        }
    }
}
</スクリプト>
//アプリ.vue
<テンプレート>
  <div id="アプリ">
    私は親コンポーネントであり、子コンポーネントから受け取るデータは{{y}}です
    <子:value="x" @sayHi="y = $event"/>
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  データ(){
    戻る {
      x: 'こんにちは、子供',
      y: ''
    }
  },
  コンポーネント:{
    子供
  }
}
</スクリプト>

2. 祖父と孫のコミュニケーション

祖父と孫の間のコミュニケーションには、祖父から父親へのコミュニケーションと、父親から息子へのコミュニケーションの 2 つの v-on コミュニケーションを使用できます。

次のいずれかのコンポーネント間通信方法を使用することもできます。

3. コンポーネント間の通信

コンポーネント間の通信では、A が B と通信しているのか、B が A と通信しているのかを区別する必要がなくなりました。代わりに、通信は普遍的な方法になります。データを送信したい人は対応する API を使用してデータを送信し、データを受信したい人は対応する API を使用してデータを受信します。

コンポーネント間で通信する方法は 2 つあります。1 つは EventBus パブリッシュ/サブスクライブ モード通信を使用する方法で、もう 1 つは Vuex 通信を使用する方法です。

3.1 イベントバス

EventBus は文字通りイベント バスを意味します。トリガーされたイベントによって送信されたすべてのデータは、フロント ドアからバス上に保存され、その後、対応するイベント データは、対応するイベントによって提供される出口をリッスンすることでバスから降りることができます。

EventBus は実際にはパブリッシュとサブスクライブ モードを意味します。つまり、データを渡す人は、カスタム イベントをトリガーする API を通じてデータをパブリッシュする必要があります。データ情報を受信する必要がある人は、イベント監視 API を通じてデータを監視する必要があります。監視対象データのパブリッシュが検出されると、そのデータが受信されます。これがデータ サブスクリプションです。

EventBus 通信で最も重要なことは、パブリッシング API とサブスクリプション API を理解することです。Vue では、Vue インスタンスは$emit$on 2 つのインターフェースを提供するため、新しい空の Vue インスタンスを作成して、これら 2 つのインターフェースを取得できます。

Vue.js の eventBus を新規作成します。
eventBus.$emit(eventName, […args]) //イベントを公開する eventBus.$on(event, callback) //イベントをサブスクライブする

以下に例を示します。

// イベントバス.js
'vue' から Vue をインポートします
エクスポート const eventBus = new Vue();
//子供
<テンプレート>
    <div>
        私は息子で、父からデータを<strong>{{value}}</strong>として受け取りました
        <button @click="こんにちは">
            親コンポーネントに挨拶しましょう</button>
        <button @click="兄弟">
            兄弟コンポーネントに挨拶しましょう</button>
    </div>
</テンプレート>

<スクリプト>
'../eventBus.js' から {eventBus} をインポートします。
エクスポートデフォルト{
    小道具:{
        値: 文字列
    },
    方法:{
        こんにちは(){
            this.$emit('sayHi','こんにちは、親御さん!');
        },
        兄弟(){
            eventBus.$emit('sibling','hi,brother');
        }
    }
}
</スクリプト>

<スタイルスコープ>
    強い{
        色: 赤;
    }
</スタイル>
//兄弟
<テンプレート>
    <div>
        私は兄弟コンポーネントであり、息子コンポーネントから受け取るデータ情報は <strong>{{x}}</strong> です。 
    </div>
</テンプレート>

<スクリプト>
'../eventBus.js' から {eventBus} をインポートします。
エクスポートデフォルト{
    データ(){
        戻る {
            ×: ''
        }
    },
    マウントされた(){
        eventBus.$on('兄弟', (msg)=>{
            this.x = メッセージ;
        })
    }
}
</スクリプト>

<スタイルスコープ>
    強い{
            色: 緑;
    }
</スタイル>
//親
<テンプレート>
  <div id="アプリ">
    私は親コンポーネントであり、子コンポーネントから受け取るデータは <strong>{{y}}</strong> です。
    <子:value="x" @sayHi="y = $event"/>
    <兄弟></兄弟>
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
'./components/Sibling' から Sibling をインポートします。
エクスポートデフォルト{
  データ(){
    戻る {
      x: 'こんにちは、子供',
      y: ''
    }
  },
  コンポーネント:{
    子供、
    兄弟
  }
}
</スクリプト>

<スタイルスコープ>
    強い{
            色: 青;
    }
</スタイル>

EventBus に関しては、次のような疑問があるかもしれません。Vue インスタンスに $emit と $on があるので、イベントをトリガーするには this.$emit を使用し、イベントを受信するには this.$on を使用しないのはなぜでしょうか。追加の空のインスタンス eventBus = new Vue() も必要です。これは、Vue 内の各コンポーネントが個別の Vue インスタンスであるためです。この Vue インスタンスでこのインスタンスの emitting イベントをトリガーすると、別のインスタンスの on イベントを受信できません。同じバス上にいない場合、イベント通信はどのように実行できるのでしょうか。そのため、公共バス、つまりイベントバスが必要になります。

上記の例でのeventBusの使用はローカルeventBusです。eventBusを使用したい人は手動で導入する必要があります。 vue のプロトタイプにぶら下げるなど、eventBus をグローバルにすることもできます。

//メイン.js
'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

Vue.config.productionTip = false

Vue.prototype.$eventBus = new Vue(); //この文を追加します。以下の新しい Vue の前にある必要があります。

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')
//子供
兄弟(){
    this.$eventBus.$emit('sibling','hi,brother');
}
//兄弟
マウントされた(){
    this.$eventBus.$on('sibling', (msg)=>{
        this.x = メッセージ;
    })
}

Vue プロトタイプにプロパティを追加する上記の方法に加えて、Object.defineProperty() を使用して Vue プロトタイプにプロパティを追加することもできます。

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

Vue.config.productionTip = false

eventBus = new Vue() とします
Object.defineProperty(Vue.prototype,'$eventBus',{
  得る(){
    イベントバスを返す
  }
})

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

3.2 ヴュークス

Vue コンポーネント間の通信では、vue.js アプリケーション専用に開発された状態管理モードである Vuex も使用できます。 Vuex の使用は比較的複雑です。詳細については、Vuex ブログを参照してください。 Vuex は、大規模で複雑な Vue プロジェクトの状態管理に適しています。一部の中小規模のアプリケーションでは、状態管理に Vuex の原則に従ってストア モードをカスタマイズできます。Vue のカスタム状態管理の詳細については、「Vue のシンプルな状態管理 - ストア モード ブログ」を参照してください。

Vuex であってもカスタム ストア モードであっても、コンポーネント間の通信を実現するという原則は、データの共有によって実現されます。コンポーネントは同じデータ ソースを使用します。1 つのコンポーネントのデータが変更されると、別のコンポーネントが依存するデータ ソースも変更されます。

上記は、Vue がコンポーネント間の通信を実装する方法の詳細です。Vue コンポーネント間の通信の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue3における7種類のコンポーネント通信の詳細
  • Vueコンポーネント通信方法事例まとめ
  • Vue がコンポーネント通信を実装する 8 つの例
  • Vueコンポーネント間の通信の非常に詳細な要約
  • Vueで親子コンポーネント通信を実装する方法
  • Vue でのコンポーネント通信の 8 つの方法 (収集する価値があります!)
  • Vue コンポーネント間の通信の 6 つの方法 (要約)
  • Vueコンポーネント通信のいくつかの実装方法
  • Vue コンポーネント間の通信方法の概要 (親子コンポーネント、兄弟コンポーネント、祖先と子孫のコンポーネント)
  • Vue がコンポーネント間の通信を実現するいくつかの方法 (複数のシナリオ)

<<:  EXPLAIN を使って MySQL の SQL 実行プランを分析する方法

>>:  Nginx 急ぎ購入 電流制限構成 実装分析

推薦する

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...

mysql8.0.20 のダウンロードとインストールおよび発生した問題 (図とテキスト)

1.ブラウザでmysqlを検索してダウンロードしてインストールしますアドレス: https://d...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

Unicode 署名 BOM の詳細な説明

Unicode 署名 BOM - BOM とは何ですか? BOM は Byte Order Mark...

MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード

序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...

読めばわかるVueの8つのヒント

1. v-forでは常に:keyを使用するデータを操作する必要があるときにプログラムを一定かつ予測可...

Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介

Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...

Centos6.5 の rpm パッケージから mysql5.7 をインストールするときに発生する初期化エラーの解決策

1. rzをサーバーにアップロードして解凍する rz [root@mini2 アップロード]# ta...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

IdeaでMySQLデータベースに接続すると中国語の文字化けが発生する問題

問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...