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 id="title">{{ 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 id="totalCount">{{ 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 サイトの他の関連記事を参照してください。