Vue 2 では、いくつかの一般的なコンポーネント間通信方法があります。これには以下が含まれます：
- 親子コンポーネント間の通信（props とイベント）
- 子親コンポーネント間の通信（イベントと $emit）
- 兄弟コンポーネント間の通信（イベントバス、Vuex 状態管理、共有親コンポーネント）
以下では、それぞれの方法についてコード例を提供します。
1. 親子コンポーネント間の通信（props とイベント）#
親コンポーネントは props を使用してデータを子コンポーネントに渡し、子コンポーネントは $emit を使用してイベントを発火させて親コンポーネントと通信します。
親コンポーネント：
<template>
<div>
<child-component :message="parentMessage" @update="handleUpdate"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '親からこんにちは'
};
},
methods: {
handleUpdate(newMessage) {
console.log('子からメッセージを受け取りました:', newMessage);
}
}
};
</script>
子コンポーネント：
<template>
<div>
<p>{{ message }}</p>
<button @click="sendMessage">メッセージを送る</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendMessage() {
const newMessage = '子からこんにちは';
this.$emit('update', newMessage);
}
}
};
</script>
2. 子親コンポーネント間の通信（イベントと $emit）#
子コンポーネントは $emit を使用してイベントを発火させ、親コンポーネントはそのイベントをリッスンして子コンポーネントから渡されたデータを取得します。
親コンポーネント：
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(data) {
console.log('子からデータを受け取りました:', data);
}
}
};
</script>
子コンポーネント：
<template>
<div>
<button @click="sendData">データを送る</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
const data = { message: '子からこんにちは' };
this.$emit('custom-event', data);
}
}
};
</script>
3. 兄弟コンポーネント間の通信（イベントバス、Vuex 状態管理、共有親コンポーネント）#
兄弟コンポーネント間の通信方法は柔軟で、イベントバス、Vuex 状態管理、または共有親コンポーネントを使用して実現することができます。
イベントバス：
イベントバスのインスタンスを作成し、兄弟コンポーネントはそのインスタンスを使用してイベントの発行と購読を行います。
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
兄弟コンポーネント：
<template>
<div>
<button @click="publishEvent">イベントを発行する</button>
</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
methods: {
publishEvent() {
const eventData = { message: '兄弟からこんにちは' };
EventBus.$emit('custom-event', eventData);
}
}
};
</script>
Vuex 状態管理：
Vuex を使用して共有状態を管理し、兄弟コンポーネントは共有状態を変更およびアクセスすることで通信を行います。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
sharedMessage: ''
},
mutations: {
updateSharedMessage(state, newMessage) {
state.sharedMessage = newMessage;
}
},
actions: {
updateSharedMessage({ commit }, newMessage) {
commit('updateSharedMessage', newMessage);
}
},
getters: {
getSharedMessage(state) {
return state.sharedMessage;
}
}
});
兄弟コンポーネント：
<template>
<div>
<button @click="updateMessage">メッセージを更新する</button>
</div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['updateSharedMessage']),
updateMessage() {
const newMessage = '兄弟からこんにちは';
this.updateSharedMessage(newMessage);
}
}
};
</script>
共有親コンポーネント：
兄弟コンポーネントは共有親コンポーネントを介してデータを渡し、親コンポーネントはデータを props として兄弟コンポーネントに渡します。
共有親コンポーネント：
<template>
<div>
<child-component :sharedMessage="sharedMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
sharedMessage: ''
};
},
methods: {
updateSharedMessage(newMessage) {
this.sharedMessage = newMessage;
}
}
};
</script>
兄弟コンポーネント：
<template>
<div>
<p>{{ sharedMessage }}</p>
<button @click="updateMessage">メッセージを更新する</button>
</div>
</template>
<script>
export default {
props: ['sharedMessage'],
methods: {
updateMessage() {
const newMessage = '兄弟からこんにちは';
this.$emit('update-message', newMessage);
}
}
};
</script>
これらは Vue 2 で一般的なコンポーネント間通信方法のコード例です。