Vue.js Component Communication Methods and Practical Examples

Vue.js components have isolated scopes, which means data cannot be directly referenced between different components. Understanding component communication is essential for building complex Vue applications.

1. props and $emit

Child components receive data from parent components through props , which are one‑way (parent → child). Parents can listen to events emitted by children using $emit .

// Parent.vue
// Child.vue

Children can send data back to parents by emitting custom events:

// Parent.vue (continued)
// Child2.vue

2. $emit and $on (Event Bus)

By creating a shared Vue instance, components can emit and listen to events across any relationship (parent‑child, sibling, or grand‑parent).

// Event bus instance
const Event = new Vue();

// Parent.vue
// Child1.vue
// Child3.vue (listening)

3. $attrs and $listeners

$attrs contains all parent‑bound attributes that are not declared as props (except class and style). $listeners contains all parent‑bound event listeners (except those with the .native modifier). They are useful for building higher‑order components.

// Parent.vue
// MyInput.vue
// Parent listening to events via $listeners
// MyInput handling $listeners

4. provide and inject

These APIs allow an ancestor component to provide data that any descendant can inject, regardless of the component depth.

// Parent.vue (provides)
// ChildA.vue (injects)
// ChildB.vue (injects the same object)

5. $parent, $children & $refs

These properties give direct access to a component’s immediate parent, its children array, and referenced elements/components.

// Parent.vue
// ChildA.vue (uses ref)
// ChildB.vue (uses $children)

6. Vuex (State Management)

Vuex provides a centralized store for all component states, enforcing a unidirectional data flow.

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = { userInfo: {} }
const getters = {
  getUserInfo(states) { return states.userInfo }
}
const mutations = {
  UPDATE_USERINFO(states, obj) { states.userInfo = obj }
}
const actions = {
  update_userinfo({ commit }, param) { commit('UPDATE_USERINFO', param) },
  incrementAsync({ commit }) { setTimeout(() => commit('increment'), 1000) }
}

export default new Vuex.Store({ state, getters, mutations, actions })

7. slot‑scope and v‑slot

From Vue 2.6, named and scoped slots use the v-slot directive.

// BaseLayout.vue (slot placeholders)
// Parent.vue (providing slot content)

8. scopedSlots property (render function)

When using render functions, scoped slots can be passed via the scopedSlots option.

// baseLayout.vue (rendering scoped slots)
// Parent component using scopedSlots

In summary, Vue component communication can be categorized into three scenarios:

Parent‑child: props , $emit/$on , Vuex, $attrs/$listeners , provide/inject , $parent/$children/$refs

Sibling: $emit/$on , Vuex

Cross‑level (grandparent‑grandchild): $emit/$on , Vuex, provide/inject , $attrs/$listeners

These techniques enable flexible data flow and method sharing across Vue component hierarchies.