Vue 2 では、いくつかの一般的なコンポーネント間通信の方法があります。これには以下が含まれます：
- 親子コンポーネント間通信（props とイベント）
- 子親コンポーネント間通信（イベントと $emit）
- 兄弟コンポーネント間通信（イベントバス、Vuex 状態管理、共有親コンポーネント）
以下に、それぞれの方法のコード例を提供します。
- 親子コンポーネント間通信（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>
- 子親コンポーネント間通信（イベントと $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>
- 兄弟コンポーネント間通信（イベントバス、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 で一般的なコンポーネント間通信の方法のコード例です。