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 急ぎ購入 電流制限構成 実装分析

推薦する

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...

ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する

Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

opensslを使用して無料の証明書を生成する方法

1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...

MySQLのレプリケーションの詳細な分析

1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...

React 国際化 react-i18next の詳細な説明

導入react-i18next は、 i18nextをベースにした強力な国際化フレームワークです。 ...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

Vue はネストされたルーティングメソッドの例を実装します

1. ネストされたルーティングはサブルーティングとも呼ばれます。実際のアプリケーションでは、通常、ネ...

HTMLからPDFへの変換のための純粋なクライアント側と純粋なサーバー側の実装ソリューション

必要ユーザーがフォームに入力して「保存」をクリックすると、PDF ドキュメントを直接ダウンロードでき...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

MySQL 文字列インデックスのより合理的な作成ルールに関する議論

序文MySQL インデックスの使用に関しては、これまでインデックスの最左接頭辞ルール、インデックス ...

secure_file_priv nullの問題を解決する

secure_file_priv = ' ';管理者としてcmdを実行します。 my...

vmware14Pro で Ubuntu システム インターフェイスが小さすぎる問題の解決方法の詳細な説明

1. 動作環境vmware14proウブントゥ 16.04LTS 2. 問題の説明vmware14P...