Vue で値を渡す方法は何通りありますか?

Vue は、ユーザー インターフェイスや単一ページの Web アプリケーションを構築するためによく使用される人気のある JavaScript フレームワークです。 Vue アプリケーションでは、コンポーネント間のデータ転送が非常に重要です。 Vue は、コンポーネント間でデータを共有するためのさまざまな値渡しメソッドを提供します。この記事ではVueにおける値の受け渡し方法について詳しく紹介します。

1. props

props は、Vue で最も一般的に使用される値渡しメソッドの 1 つであり、非常に理解しやすいものです。これにより、親コンポーネントが子コンポーネントにデータを渡すことができます。 Vue では、コンポーネントを HTML タグのように使用することもできます。以下は、props を使用してデータを渡す方法を示す例です。

<template>
  <div>
    <child-component :title="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, world!',
    }
  },  
}
</script>

この例では、構文 :title="message" を使用し、親コンポーネントのデータ メッセージを prop として子コンポーネントに渡します。子コンポーネントでは、props キーワードを通じてこの prop を受け取ることができます。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title'],
}
</script>

子コンポーネントでは、この prop は props: ['title'] を通じて受信され、テンプレートに表示されます。

2. Emit

emit を使用すると、子コンポーネントが親コンポーネントにデータを渡すことができます。 Emit を使用するには、子コンポーネントで $emit メソッドを使用してカスタム イベントをトリガーし、親コンポーネントでこのイベントをリッスンする必要があります。以下は、emit を使用してデータを渡す例です。

<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>

このサンプル コードでは、ボタンがクリックされると、increment メソッドが呼び出され、this.$emit メソッドが呼び出され、カスタムイベント「増分」。イベント内でデータを運ぶことができます。ここではオプションとして count を親コンポーネントに渡します。

<template>
  <div>
    <child-component @increment="incrementCount"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      total: 0,
    }
  },
  methods: {
    incrementCount(count) {
      this.total = count
    },
  },
}
</script>

親コンポーネントのテンプレートでは、構文 @increment="incrementCount"子コンポーネントのカスタム イベントをリッスンします。子コンポーネントが「インクリメント」をトリガーすると、イベントが発生したら、incrementCount メソッドを呼び出して、親コンポーネントの状態を更新します。

3. Vuex

Vuex は、Vue アプリケーション専用に開発された状態管理パターンです。これはグローバルな状態管理センターを提供し、状態、ゲッター、ミューテーション、アクションなどのいくつかの一般的な状態管理パターンを使用します。

Vuex を使用する利点は、データを転送するための中央リポジトリが提供され、アプリケーションの状態をより制御しやすく、保守しやすくできることです。 Vuex では、ストアを通じて状態をコンポーネントに渡すことができます。

次は簡単な Vuex の例です。ストアでは、変数 count を定義し、カウント ステータスを更新できる increment ミューテーションを公開します。

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    },
  },
})

export default store

コンポーネントでは、$store を使用して、Vuex リポジトリの状態と操作にアクセスできます。以下は、Vuex を使用して状態を更新する例です。

<template>
  <div>
    <h1>{{ $store.state.count }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment', 1)
    },
  },
}
</script>

このコード例では、ボタンがクリックされると、increment メソッドが呼び出され、データを渡すために this.$store.commit メソッドが呼び出されます。 Vuex リポジトリにミューテーションを追加して状態を更新します。

4. Provide/Inject

Provide/Inject は、チェーン内のすべての子孫コンポーネント間でデータを簡単に共有できるコンポーネント通信手段を提供します。これにより、親コンポーネントがデータを提供し、子孫コンポーネントがデータを消費できるようになります。

親コンポーネントでは、provide 属性を通じてデータを提供します。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      message: 'Hello from parent component.',
    }
  },
}
</script>

この例では、provide を使用してデータ メッセージを提供し、それを子コンポーネントに渡します。子コンポーネントでは、inject を使用してこのデータを注入できます。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  inject: ['message'],
}
</script>

この例では、inject を使用して、親コンポーネントによって提供されたメッセージ データを挿入し、テンプレートに表示します。

概要

上記は、Vue の 4 つの一般的な値渡しメソッド (props、emit、Vuex、Provide/Inject) をまとめたものです。各値渡しメソッドには、適用可能なシナリオと標準的な使用法があります。これらの値の転送方法を理解すると、Vue コンポーネント間のデータ転送をより深く理解できるようになります。 Vue アプリケーションでデータ共有を実現するために、実際のニーズに応じてこれらの値渡しメソッドを選択して組み合わせることができます。

以上がVue で値を渡す方法は何通りありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。