Vue.jsのrefsとemitの使い分けを徹底解説！
Vue.jsを使っていると、親子コンポーネント間のデータやイベントのやり取りにrefsやemitを使用する場面が多々あります。しかし、「どちらを使えばいいのか分からない」という声もよく耳にします。この記事では、refsとemitの使い分けをわかりやすく解説します！
1. refsとは？
refsは、コンポーネントやDOM要素に直接アクセスするための仕組みです。以下の特徴があります。
特徴
- 直接アクセス: 子コンポーネントやDOM要素に直接アクセスできます。
- 親が主導: 親コンポーネントが子の操作を直接行う場合に便利。
- リアクティブではない:
refsで取得したオブジェクトはVueのリアクティブシステムに含まれません。
使いどころ
- 子コンポーネントやDOM要素に直接操作を加えたいとき（例：入力フォームのリセット、フォーカスの設定など）。
- 高度なカスタムUI操作を必要とする場合。
使用例
<template>
<ChildComponent ref="childRef" />
</template>
<script>
export default {
methods: {
handleChildAction() {
this.$refs.childRef.someMethod(); // 子コンポーネントのメソッド呼び出し
},
},
};
</script>2. emitとは？
emitは、子コンポーネントが親コンポーネントにイベントを通知するための仕組みです。
特徴
- イベント駆動: 子から親へイベントを発火する形で連携します。
- データのやり取りが簡単: イベントペイロードを使って親に必要なデータを渡せます。
- 親が反応的: 親コンポーネントのリアクティブデータを変更するトリガーとして使用可能。
使いどころ
使用例
<!-- 子コンポーネント -->
<template>
<button @click="notifyParent">クリック</button>
</template>
<script>
export default {
methods: {
notifyParent() {
this.$emit('child-event', { data: 'sample data' }); // イベント発火
},
},
};
</script>
<!-- 親コンポーネント -->
<template>
<ChildComponent @child-event="handleChildEvent" />
</template>
<script>
export default {
methods: {
handleChildEvent(payload) {
console.log(payload.data); // 子から渡されたデータを処理
},
},
};
</script>3. 使い分けの指針
refsを使うべきとき
- 子コンポーネントの内部状態やメソッドに直接アクセスが必要な場合。
- 親が子の動作を完全に制御する必要がある場合。
emitを使うべきとき
- 子から親への「通知」を行いたい場合。
- データやイベントのやり取りがシンプルな場合。
4. 注意点
refsのデメリット
- Vueのリアクティブシステムをバイパスするため、状態管理が複雑になりがち。
- コンポーネント間の結合度が高くなり、再利用性が低下する可能性があります。
emitのデメリット
- 双方向のやり取りが必要な場合は、データフローが複雑になりやすい。
- イベントが多すぎると可読性が低下します。
まとめ
refsとemitは、それぞれ適材適所で使用することで、Vue.jsのコンポーネント間通信を効果的に行えます。
- 制御が必要な場合は
refs。 - 通知が必要な場合は
emit。
使いどころを見極めて、コードの保守性を高めましょう！