Vue ドキュメントにおける一方向データ フローの実装方法の紹介

Vue は、一方向のデータ フロー モデルを使用してコンポーネント間のデータ送信と通信を制御する人気の JavaScript フレームワークです。 Vue フレームワーク内では、データは親コンポーネントから子コンポーネントにのみ渡すことができ、子コンポーネントは親コンポーネントのデータを直接変更できません。このパターンにより、コードの保守性、信頼性が向上し、再利用が容易になります。

この記事では、Vue ドキュメントで一方向のデータ フローを実装する方法を紹介します。

1. Prop の配信

Prop は、Vue フレームワークで一方向のデータ フローを実装するための主要なメソッドの 1 つです。 Vue では、Props を使用して親コンポーネントから子コンポーネントにデータを渡すことができます。子コンポーネントが受け取る Prop 属性は読み取り専用であり、親コンポーネントのデータを直接変更することはできず、親コンポーネントと通信できるのは Emit イベントを通じてのみです。

親コンポーネントで v-bind ディレクティブを使用して、子コンポーネントにデータを渡します:

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

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

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

子コンポーネントの props オプションは、親コンポーネントからデータを受け取ります:

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

<script>
export default {
  props: {
    title: String
  }
}
</script>

上記のコードでは、title 属性は String 型として定義されています。これは、検証と型変換が Vue によって処理されることを意味します。渡されたタイトルはサブコンポーネントでは変更できず、計算操作または表示にのみ使用できます。

2. カスタム イベント

Vue フレームワークでは、親コンポーネントと子コンポーネントはカスタム イベントを使用して通信します。子コンポーネントは、Vue が提供する $emit メソッドを使用してカスタム イベントをトリガーし、データを親コンポーネントに渡すことができます。親コンポーネントは、v-on ディレクティブを通じて子コンポーネントによって発行されたイベントをリッスンしてデータを受信できます。

子コンポーネントでカスタム イベントをトリガーする:

<template>
  <button @click="increment">{{ counter }}</button>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
      this.$emit('increment', this.counter)
    }
  }
}
</script>

親コンポーネントでカスタム イベントをリッスンする:

<template>
  <child-component @increment="onIncrement"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    onIncrement(counter) {
      console.log(`Counter is ${ counter }`)
    }
  }
}
</script>

上記のコードでは、子コンポーネントはインクリメント メソッドを定義します。 $emit メソッドは、インクリメントのカスタム イベントをトリガーするために使用され、カウンター値がパラメーターとして親コンポーネントに渡されます。親コンポーネントは、v-on ディレクティブを通じて子コンポーネントにバインドされたインクリメント イベントをリッスンし、子コンポーネントによって渡されたデータを受け取る onIncrement メソッドを定義します。

3. $attrs と $listeners

クリック イベントや変更イベントなど、親コンポーネント内の子コンポーネント内でネイティブ イベントを使用することがあります。これらのイベントを適切に動作させるために、Vue は $attrs と $listeners という特別な属性を提供します。 $attrs を使用すると、子コンポーネントは props によって定義されていないすべての属性を親コンポーネントに渡すことができ、$listeners は、子コンポーネントによってバインドされたすべてのイベント (ネイティブ イベントやカスタム イベントを含む) を親コンポーネントに渡すことができます。

子コンポーネントでネイティブ イベントを持つコンポーネントを定義します:

<template>
  <input type="text" @input="$emit('change', $event.target.value)">
</template>

<script>
export default {}
</script>

親コンポーネントで子コンポーネントを使用し、ネイティブ イベントをバインドします:

<template>
  <child-component v-on="$listeners"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

上記のコードでは、親コンポーネントは v-on ディレクティブを使用して $listeners を子コンポーネントに渡すため、子コンポーネントはバインドされたネイティブ イベントとカスタム イベントを親コンポーネントに渡すことができます。

概要

Vue フレームワークの一方向データ フロー パターンにより、コンポーネント間の通信がより明確になり、信頼性が高まります。コンポーネント間のデータ転送と通信は、Prop、カスタム イベント、$attrs/$listeners などのメソッドを使用して実現できます。これらのスキルを習得すると、Vue フレームワークをより適切に使用して、ユーザーのニーズを満たすアプリケーションを開発することができます。

以上がVue ドキュメントにおける一方向データ フローの実装方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。