Vue ドキュメントのコンポーネント データ転送とイベント転送の実装方法
Vue は、開発者が複雑なページを小さな独立したモジュールに分解できるコンポーネント化機能を備えた人気のフロントエンド フレームワークです。 Vueではコンポーネント間のデータ転送とイベント転送が非常に重要なテーマとなっておりますが、今回はVueにおけるコンポーネントのデータ転送とイベント転送の実装方法について詳しく紹介していきます。
1. コンポーネント データの転送
Vue では、コンポーネント データの転送は 2 つのカテゴリに分けられ、1 つは親コンポーネントから子コンポーネントへの転送、もう 1 つは子コンポーネントの転送です。コンポーネントを親コンポーネントに転送します。
1. 親コンポーネントは子コンポーネントにデータを渡します
親コンポーネントは、子コンポーネントにデータを渡すために props オプションを使用する必要があります。props は、子コンポーネントが親コンポーネントから渡されたデータを受け取る方法です。親コンポーネントの v-bind: 属性名を介して子コンポーネントにデータを渡し、子コンポーネントの props オプションを介してデータを受け取ります。
最初に親コンポーネントのコードを見てください:
<template> <div> <child-component :title="title"></child-component> </div> </template> <script> import ChildComponent from './child.vue' export default { components: { ChildComponent }, data () { return { title: 'this is the title' } } } </script>
上記のコードでは、メイン コンポーネントを定義し、v-bind: コンポーネントを通じて title 属性を子コンポーネントに渡します。
次に、サブコンポーネントのコードを見てみましょう:
<template> <div> <h1>{{ title }}</h1> </div> </template> <script> export default { props: { title: { type: String, required: true } } } </script>
上記のコードでは、サブコンポーネントを定義し、親コンポーネントから props オプションを通じて渡された title 属性を受け取ります。
2. サブコンポーネントが親コンポーネントにデータを渡す
サブコンポーネントから親コンポーネントにデータを渡すには、$emit メソッドを使用する必要があります。$emit は、サブコンポーネントが親にデータを渡す方法です。成分。子コンポーネントで $emit メソッドを使用して、カスタム イベントをトリガーし、渡す必要があるデータを渡します。このカスタム イベントを親コンポーネントで @event 名を使用してリッスンし、子コンポーネントによって渡されたデータをイベントレスポンス機能です。
最初にサブコンポーネントのコードを見てください:
<template> <div> <button @click="increment">{{ count }}</button> </div> </template> <script> export default { data () { return { count: 0 } }, methods: { increment () { this.count++ this.$emit('increment', this.count) } } } </script>
上記のコードでは、サブコンポーネントを定義し、$emit メソッドを使用して、ボタンがクリックされたときにカスタム イベント インクリメントをトリガーします。現在のカウント値をパラメータとして親コンポーネントに渡します。
次に、親コンポーネントのコードを見てください:
<template> <div> <h1>{{ totalCount }}</h1> <child-component @increment="onChildIncrement"></child-component> </div> </template> <script> import ChildComponent from './child.vue' export default { components: { ChildComponent }, data () { return { totalCount: 0 } }, methods: { onChildIncrement (count) { this.totalCount += count } } } </script>
上記のコードでは、親コンポーネントを定義し、子コンポーネントのインクリメント イベントをリッスンするときに、カウント値を渡します。応答関数 onChildIncrement のパラメーターとして使用し、応答関数の totalCount の値を更新します。
2. コンポーネントのイベント配信
Vue では、コンポーネント間のイベント配信はイベント バスと vuex を通じて実現できます。
1. イベント バス
イベント バスは、単純なイベント配信方法です。中央のイベント バスを作成します。すべてのコンポーネントは、イベントを登録したり、イベント バスにイベントをトリガーしたりできます。 Vue では、Vue.prototype.$bus プロパティを使用してイベント バスを作成できます。
最初にイベント バスの使用方法を見てみましょう:
// main.js中创建事件总线 import Vue from 'vue' Vue.prototype.$bus = new Vue() // 在需要传递事件的组件中注册事件和触发事件 this.$bus.$emit('my-event', data) this.$bus.$on('my-event', (data) => { ... })
上記のコードでは、main.js ファイルの Vue.prototype.$bus プロパティを通じてイベント バスを作成しました。次に、イベントを渡す必要があるコンポーネントで、$emit メソッドを介してカスタム イベント my-event をトリガーし、パラメーターとして渡す必要があるデータをイベントの応答関数に渡します。イベントを受信し、$on メソッド イベントを通じてカスタム イベント my- をリッスンし、イベント応答関数で渡されたデータを受信する必要があります。
2.vuex
vuex は、公式に推奨される状態管理ソリューションです。すべてのコンポーネントの状態をグローバル状態ツリーに配置します。すべてのコンポーネントは、グローバル状態から状態にアクセスできます。ツリー内のステータスを更新します。 vuex では、ストア オブジェクトを使用してグローバル状態を保存し、ミューテーション、アクション、ゲッターを通じてグローバル状態を変更できます。
まず、vuex の使用方法を見てみましょう:
// store.js文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { asyncIncrement (context) { setTimeout(() => { context.commit('increment') }, 1000) } }, getters: { doubleCount (state) { return state.count * 2 } } }) // 在组件中使用vuex import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' export default { computed: { ...mapState({ count: state => state.count }), ...mapGetters([ 'doubleCount' ]) }, methods: { ...mapMutations([ 'increment' ]), ...mapActions([ 'asyncIncrement' ]) } }
上記のコードでは、store.js ファイルにグローバル状態を保存するストア オブジェクトを定義し、ミューテーション、アクション、およびgetters を使用してグローバル状態を変更および取得します。コンポーネントでは、mapState、mapMutations、mapActions、mapGetters などの補助関数を通じてストア内の状態、変更関数、およびアクション関数をマップし、コンポーネント内で使用します。
結論
Vue では、コンポーネント間のデータ転送とイベント転送は非常に重要なトピックです。さまざまなシナリオやニーズに合わせて、props、$emit、イベント バス、vuex などのメソッドを使用して、データ転送とイベント転送を実現します。これらのスキルを習得すると、Vue アプリケーションをより柔軟に編成および管理できるようになります。
以上がVue ドキュメントのコンポーネント データ転送とイベント転送の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Vue で Provide と Inject を使用して、コンポーネント間のデータ転送とパフォーマンスの最適化を実現します。Vue では、コンポーネント間のデータ転送は非常に一般的な要件です。コンポーネント ツリー内のノードでデータを提供し、そのデータを子孫コンポーネントで使用したい場合がありますが、この場合は、Vue の Provide および Inject を使用してこれを実現できます。データ転送に加えて、Provide と Inject はパフォーマンスの最適化にも使用でき、props 転送のレベルを削減し、コンポーネントのパフォーマンスを向上させます。証明

PHP言語を使用してAPIインターフェースを呼び出し、システム間のデータ転送と同期を実現するにはどうすればよいですか?最新のシステムを開発および設計する場合、多くの場合、異なるシステム間でデータを転送および同期する必要があります。一般的な方法は、API インターフェイスを使用してシステム間の通信を実装することです。この記事では、PHP 言語を使用して API インターフェイスを呼び出し、システム間のデータ転送と同期を実現する方法を紹介します。 API (アプリケーション プログラミング インターフェイス) は、さまざまなシステムを実装するためのプログラム的な方法です。

Vue は、再利用可能で効率的なコンポーネント化されたアプリケーションの構築に役立つ多くの便利な機能とメカニズムを提供する、人気のあるフロントエンド開発フレームワークです。 Vue では、親子コンポーネントの通信とデータ転送が一般的な要件の 1 つです。この記事では、Vue で親コンポーネントと子コンポーネント間の通信とデータ転送を実装する方法を詳しく紹介し、具体的なコード例を示します。 Vue では、親コンポーネントと子コンポーネント間の通信は、props メソッドと $emit メソッドを通じて実現できます。 Props は親コンポーネントが子コンポーネントにデータを渡すメカニズムであり、$emi は

ブラウザーのイベント配信メカニズム: イベント バブリングの謎を探る イベントはフロントエンド開発における重要な概念ですが、ブラウザーのイベント配信メカニズムはさらに重要です。私たちの日々のフロントエンド開発では、イベントのバインディングと処理が頻繁に行われます。イベント配信メカニズム、特にイベント バブリングの原理を理解することは、イベントをより深く理解し、処理するのに役立ちます。ブラウザーでフロントエンド開発を行う場合、通常、ページは要素で構成されます。これらの要素には、ユーザーの操作に応答するさまざまなイベントを追加できます。そしていつ

Vue コンポーネント通信: データ転送には v-bind 命令を使用します。Vue.js は、強力なコンポーネント開発機能を提供する人気のあるフロントエンド フレームワークです。 Vue アプリケーションでは、コンポーネントの通信は重要な問題です。 v-bind命令はVueフレームワークが提供するデータ転送メソッドで、この記事ではv-bind命令を使ってコンポーネント間でデータを転送する方法を紹介します。 Vue では、コンポーネント通信は、親子コンポーネント通信と兄弟コンポーネント通信の 2 つの状況に分類できます。以下、この2つの側面からそれぞれ紹介していきます。

Vue は非常に人気のあるフロントエンド開発フレームワークであり、コンポーネントは非常に重要な構成要素です。 Vue では、コンポーネント内のデータとコンポーネント パラメーターのプロパティをうまく組み合わせて使用して、データ転送を実現できます。 Vue コンポーネントでは、データはコンポーネント内の状態データです。コンポーネント内のすべてのメソッドからアクセスおよび変更できます。コンポーネント内でデータを使用するには、次の方法でデータを宣言できます。exportdefault{data(){

Vue 開発で発生するフロントエンドとバックエンドのデータ転送の問題には、特定のコード サンプルが必要です。フロントエンド テクノロジである Vue の開発により、人気のあるフロントエンド フレームワークとして、Web アプリケーションの開発に Vue を使用する開発者がますます増えています。 。 Vue 開発プロセスでは、フロントエンド データとバックエンド データの送信は非常に重要なリンクです。この記事では、Vue 開発におけるフロントエンドとバックエンドのデータ転送に関する一般的な問題をいくつか紹介し、これらの問題を解決するための具体的なコード例を示します。フロントエンドとバックエンドのデータ転送形式は統一されていないため、フロントエンドとバックエンドのデータ転送プロセス中に、

Vue でルーティングを使用してページ間のデータ転送と状態管理を実装するにはどうすればよいですか? Vue では、Router はページ間を切り替えるためのコア プラグインの 1 つです。ページジャンプ以外にも、ルーティングを利用してデータ転送やステータス管理を実現することもできます。この記事では、Vueのルーティングプラグイン(VueRouter)を使ってページ間のデータ転送やステータス管理を実現する方法と、対応するコード例を紹介します。ルーティングの基本的な使用法 VueRouter は、Vue.js の公式ルーティング プラグインです。
