The Project | About Us | Contribute | Donations | License

HOME

In Vue.js, components are the building blocks of your application. As your application grows, you'll need to manage communication between these components effectively. This section will cover various methods for component communication, including props, custom events, and more advanced techniques.

Key Concepts

Props: Passing data from a parent component to a child component.
Custom Events: Emitting events from a child component to a parent component.
Event Bus: A simple way to facilitate communication between sibling components.
Vuex: A state management pattern for more complex communication needs.

Props

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.

Example

Parent Component (App.vue):

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

Child Component (ChildComponent.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

Explanation

The parent component passes a message prop to the ChildComponent.
The child component receives this prop and can use it within its template.

Custom Events

Custom events allow a child component to emit an event that a parent component can listen for.

Example

Parent Component (App.vue):

<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Event received from child:', data);
    }
  }
};
</script>

Child Component (ChildComponent.vue):

<template>
  <div>
    <button @click="emitEvent">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
};
</script>

Explanation

The child component emits a childEvent with some data.
The parent component listens for this event and handles it with the handleChildEvent method.

Event Bus

An event bus is a simple way to facilitate communication between sibling components. It involves creating a new Vue instance to act as a central event hub.

Example

EventBus.js:

import Vue from 'vue';
export const EventBus = new Vue();

Component A (ComponentA.vue):

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageSent', 'Hello from Component A');
    }
  }
};
</script>

Component B (ComponentB.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('messageSent', (data) => {
      this.message = data;
    });
  }
};
</script>

Explanation

EventBus.js creates a new Vue instance to act as an event bus.
Component A emits an event via the event bus.
Component B listens for this event and updates its data accordingly.

Vuex

For more complex state management, Vuex is the recommended solution. It allows you to manage the state of your application in a centralized store.

Example

Store (store.js):

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    setMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  },
  getters: {
    message: state => state.message
  }
});

Component A (ComponentA.vue):

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['setMessage']),
    changeMessage() {
      this.setMessage('New message from Component A');
    }
  }
};
</script>

Component B (ComponentB.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['message'])
  }
};
</script>

Explanation

The Vuex store manages the state and provides methods to update it.
Component A dispatches an action to update the state.
Component B retrieves the updated state via a getter.

Practical Exercise

Task

Create a parent component that passes a message to a child component using props.
Create a child component that emits an event to the parent component.
Use an event bus to facilitate communication between two sibling components.
Implement a simple Vuex store to manage a shared state between two components.

Solution

Parent Component (App.vue):

<template>
  <div>
    <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
    <sibling-a></sibling-a>
    <sibling-b></sibling-b>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';
import { EventBus } from './EventBus';

export default {
  components: {
    ChildComponent,
    SiblingA,
    SiblingB
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Event received from child:', data);
    }
  },
  created() {
    EventBus.$on('messageSent', (data) => {
      console.log('Event received from sibling:', data);
    });
  }
};
</script>

Child Component (ChildComponent.vue):

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    emitEvent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
};
</script>

Sibling A (SiblingA.vue):

<template>
  <div>
    <button @click="sendMessage">Send Message to Sibling B</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageSent', 'Hello from Sibling A');
    }
  }
};
</script>

Sibling B (SiblingB.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('messageSent', (data) => {
      this.message = data;
    });
  }
};
</script>

Vuex Store (store.js):

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    setMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  },
  getters: {
    message: state => state.message
  }
});

Component A (ComponentA.vue):

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['setMessage']),
    changeMessage() {
      this.setMessage('New message from Component A');
    }
  }
};
</script>

Component B (ComponentB.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['message'])
  }
};
</script>

Conclusion

In this section, you learned about various methods for component communication in Vue.js, including props, custom events, event bus, and Vuex. Each method has its use cases and can be chosen based on the complexity and requirements of your application. Understanding these techniques will help you build more modular and maintainable Vue.js applications.

Component Communication

Key Concepts

Props

Example

Explanation

Custom Events

Example

Explanation

Event Bus

Example

Explanation

Vuex

Example

Explanation

Practical Exercise

Task

Solution

Conclusion

Vue.js Course

Module 1: Introduction to Vue.js

Module 2: Vue.js Basics

Module 3: Vue.js Components

Module 4: Vue Router

Module 5: State Management with Vuex

Module 6: Vue.js Directives

Module 7: Vue.js Plugins

Module 8: Testing in Vue.js

Module 9: Advanced Vue.js Concepts

Module 10: Building and Deploying Vue.js Applications

Module 11: Real-World Vue.js Projects