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 インスタンスは 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: EXPLAIN を使って MySQL の SQL 実行プランを分析する方法
序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...
この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...
Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...
ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...
1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...
導入react-i18next は、 i18nextをベースにした強力な国際化フレームワークです。 ...
この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...
1. ネストされたルーティングはサブルーティングとも呼ばれます。実際のアプリケーションでは、通常、ネ...
必要ユーザーがフォームに入力して「保存」をクリックすると、PDF ドキュメントを直接ダウンロードでき...
目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...
序文MySQL インデックスの使用に関しては、これまでインデックスの最左接頭辞ルール、インデックス ...
secure_file_priv = ' ';管理者としてcmdを実行します。 my...
1. 動作環境vmware14proウブントゥ 16.04LTS 2. 問題の説明vmware14P...