Summary of Vue Component Data Communication Methods

Background: Vue.js components have isolated scopes; parent‑child, sibling, and grandparent‑grandchild relationships are illustrated.

Prop / $emit : Parent passes data via props, child emits events to parent. Example:

// Parent component
<template>
  <div class=\"container\">
    <child :title=\"title\"></child>
  </div>
</template>

<script>
import Child from \"./component/child.vue\";
export default {
  name: \"demo\",
  data: function() {
    return { title: \"我是父组件给的\" };
  },
  components: { Child }
};
</script>

Child component uses props to receive title and can emit events with $emit .

$emit / $on (event bus) : A dedicated Vue instance acts as a central hub for emitting and listening to events, enabling communication across any component hierarchy.

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

export default {
  data() { return { Event }; },
  // components use this.Event.$emit(...) and this.Event.$on(...)
};

Vuex : Centralized state management with a single store; components read state via getters and modify it through actions and mutations.

// store.js
import Vue from \"vue\";
import Vuex from \"vuex\";
Vue.use(Vuex);
export default new Vuex.Store({
  state: { count: 1 },
  mutations: {
    increment(state) { state.count++; },
    reduce(state) { state.count--; }
  },
  actions: {
    actIncrement({ commit }) { commit('increment'); },
    actReduce({ commit }) { commit('reduce'); }
  },
  getters: { doubleCount: state => state.count * 2 }
});

$attrs / $listeners : Automatically pass non‑prop attributes and listeners from a parent to a child, useful for higher‑order components.

// Parent component
<child1 :aa=\"aa\" :bb=\"bb\" v-on=\"$listeners\" v-bind=\"$attrs\"></child1>

Provider / Inject : Allows an ancestor component to provide a value that any descendant can inject, without prop drilling.

// Provider (parent)
provide() { return { obj: this }; }

// Injector (descendant)
inject: { obj: { default: () => ({}) } }

$parent / $children & $refs : Direct references to parent, child components, or DOM elements for imperative interactions.

// Accessing refs
this.$refs.comp1.title;
this.$children[1].title;

In summary, Vue offers multiple communication patterns—Props/$emit for simple parent‑child flow, Vuex or an event bus for shared or cross‑component state, and advanced APIs like $attrs/$listeners, Provider/Inject, and $refs for more complex scenarios.