ホームページ ウェブフロントエンド Vue.js Vue ドキュメントのコンポーネント データ転送とイベント転送の実装方法

Vue ドキュメントのコンポーネント データ転送とイベント転送の実装方法

Jun 20, 2023 am 10:21 AM
データ転送 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

Vue で Provide と Inject を使用して、コンポーネント間のデータ転送とパフォーマンスの最適化を実装します。 Vue で Provide と Inject を使用して、コンポーネント間のデータ転送とパフォーマンスの最適化を実装します。 Jul 17, 2023 pm 07:19 PM

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

PHP言語を使用してAPIインターフェースを呼び出し、システム間のデータ転送と同期を実現するにはどうすればよいですか? PHP言語を使用してAPIインターフェースを呼び出し、システム間のデータ転送と同期を実現するにはどうすればよいですか? Sep 05, 2023 am 11:26 AM

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

Vue コンポーネントの親コンポーネントと子コンポーネント間の通信とデータ転送を実装する方法 Vue コンポーネントの親コンポーネントと子コンポーネント間の通信とデータ転送を実装する方法 Oct 08, 2023 pm 09:51 PM

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

ブラウザイベント配信の深い理解: イベントバブリングメカニズムの解明 ブラウザイベント配信の深い理解: イベントバブリングメカニズムの解明 Feb 19, 2024 pm 07:43 PM

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

Vue コンポーネント通信: データ転送には v-bind ディレクティブを使用します Vue コンポーネント通信: データ転送には v-bind ディレクティブを使用します Jul 07, 2023 pm 04:46 PM

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

コンポーネント内のデータとコンポーネント パラメーターのプロパティを使用して Vue でデータ転送を実現する方法 コンポーネント内のデータとコンポーネント パラメーターのプロパティを使用して Vue でデータ転送を実現する方法 Jun 11, 2023 pm 02:03 PM

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

Vue 開発で発生したフロントエンドとバックエンドのデータ転送の問題 Vue 開発で発生したフロントエンドとバックエンドのデータ転送の問題 Oct 08, 2023 pm 01:25 PM

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

Vue でルーティングを使用してページ間のデータ転送と状態管理を実装するにはどうすればよいですか? Vue でルーティングを使用してページ間のデータ転送と状態管理を実装するにはどうすればよいですか? Jul 21, 2023 am 08:18 AM

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

See all articles