単方向データフローでは、子コンポーネントは親コンポーネントにイベントを発行することで、特定のアクションを親コンポーネントに通知することができます。親コンポーネントはこれらのイベントをリスニングし、イベントハンドラ内でデータを修正または更新することができます。
単方向データフローを使用することで、Vueはアプリケーション内のデータを追跡可能に保ち、コードの複雑性を軽減します。これにより、アプリケーション内の問題の特定とデバッグが容易になり、コードの保守性と拡張性が向上します。
export default {
data() {
return {
message: 'Hello Vue!'
};
},
components: {
Child
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
};
2. Child.vue:
<template> <div> <p>子コンポーネントで受け取ったデータ{{childData}}</p> <button @click="updateParent">親コンポーネントのデータを更新する</button> </div> </template> <script> export default { props: ['childData'], methods: { updateParent() { this.$emit('update', 'New message from child'); } } }; </script>
この例では、親コンポーネント Parent.vue には message というデータ項目があり、バインディングによって子コンポーネント Child.vue に渡されます。子コンポーネントは props バインディングによって親コンポーネントからデータを受け取り、子コンポーネントに表示します。
子コンポーネント Child.vue には、クリックすると updateParent メソッドをトリガーするボタンがあります。 このメソッドは、$emit メソッドを使用して「update」というカスタムイベントを親コンポーネントに送信し、新しいメッセージをパラメータとして渡します。
親コンポーネントは、このカスタムイベントをリスニングし、イベントハンドラ updateMessage で新しいメッセージを受信します。 このイベントハンドラでは、親コンポーネントは自身のメッセージデータを修正し、再レンダリングすることができます。
このようにして、親コンポーネントは一方向のデータフローを通じて子コンポーネントにデータを渡し、子コンポーネントのイベントをリスニングすることで子コンポーネントのアクションに応答し、親コンポーネントと子コンポーネント間のデータの一方通行の流れを実現します。
