Component Communication

Rare Earth Juejin Tech Community

Mar 21, 2025 · Frontend Development

Component Communication in Vue 3: Props, Emit, Sibling Communication, Event Bus, Pinia, Provide/Inject, and Ref

This article provides a comprehensive guide to Vue 3 component communication, covering parent‑to‑child props, child‑to‑parent emit, sibling communication via parent mediation, event bus, Pinia state management, provide/inject, shared reactive objects, and component instance references, with code examples and a comparison table.

Component CommunicationEmitPinia

0 likes · 13 min read

Component Communication in Vue 3: Props, Emit, Sibling Communication, Event Bus, Pinia, Provide/Inject, and Ref

Rare Earth Juejin Tech Community

Feb 6, 2025 · Frontend Development

Component Communication in React 18 and Vue 3: Parent‑Child, Sibling, and Cross‑Level Patterns

This article compares React 18 and Vue 3 component communication techniques—including parent‑child, sibling, and cross‑level patterns—provides detailed code examples for props, emit, context, provide/inject, and summarizes their respective advantages and use cases in modern web development.

Component CommunicationContext APIJavaScript

0 likes · 13 min read

Component Communication in React 18 and Vue 3: Parent‑Child, Sibling, and Cross‑Level Patterns

Rare Earth Juejin Tech Community

Dec 17, 2024 · Frontend Development

13 Ways to Pass Data Between Components in Vue 3

This article comprehensively outlines thirteen distinct methods for component communication in Vue 3, covering parent‑to‑child props, child‑to‑parent emits, sibling communication via mitt, $attrs, refs, v‑model, provide/inject, router parameters, Vuex, Pinia, browser storage, window object, and globalProperties, with concise code examples for each.

Component CommunicationJavaScriptVue

0 likes · 14 min read

13 Ways to Pass Data Between Components in Vue 3

Code Mala Tang

Oct 5, 2024 · Frontend Development

Master Vue 3 Ref: One‑Way Data Flow, Component Communication & Custom useRefState

This article explains how to use Vue 3's ref and shallowRef for reactive state, demonstrates one‑way data flow between parent and child components via props and events, and introduces a custom useRefState composable that mimics React's useState for cleaner state management.

Component CommunicationVuefrontend

0 likes · 10 min read

Master Vue 3 Ref: One‑Way Data Flow, Component Communication & Custom useRefState

Rare Earth Juejin Tech Community

Aug 10, 2024 · Mobile Development

Implementing a Four-Level Address Cascade Component with Custom Dialog in Huawei HarmonyOS (Next)

This tutorial demonstrates how to build a four‑level province‑city‑district‑town address cascade selector using a custom dialog in Huawei HarmonyOS, covering preparation, custom dialog creation, component communication, logic implementation, and data handling with complete code examples.

Address CascadeComponent CommunicationCustom Dialog

0 likes · 14 min read

Implementing a Four-Level Address Cascade Component with Custom Dialog in Huawei HarmonyOS (Next)

Code Mala Tang

Jul 12, 2024 · Frontend Development

Mastering React Component Communication: 7 Essential Techniques

Explore seven core methods for React component communication—including Props, State Lifting, Context, Refs, Hooks, Event Emitters, and Redux—detailing practical code examples, key considerations, and best practices to help developers choose the optimal approach for various application scenarios.

Component CommunicationHooksProps

0 likes · 16 min read

Mastering React Component Communication: 7 Essential Techniques

Rare Earth Juejin Tech Community

Mar 13, 2024 · Frontend Development

Using Provide/Inject and Ref for Cross-Component Communication in Vue

The article discusses common Vue component communication patterns such as props‑emit, event buses, and ref usage, then introduces a colleague's provide‑inject plus ref approach that simplifies cross‑component interactions while highlighting its trade‑offs regarding Vue's one‑way data flow.

Component CommunicationVueprovide/inject

0 likes · 5 min read

Using Provide/Inject and Ref for Cross-Component Communication in Vue

37 Interactive Technology Team

Dec 10, 2019 · Frontend Development

Vue.js Component Communication Methods and Practical Examples

Vue.js offers multiple component communication techniques—including one‑way props, $emit/$on events, an event bus, $attrs/$listeners, provide/inject, direct $parent/$children/$refs access, Vuex state management, and slot‑based patterns—enabling flexible data flow between parents, children, siblings, and distant descendants.

$onComponent CommunicationEmit

0 likes · 18 min read

Vue.js Component Communication Methods and Practical Examples

政采云技术

Aug 27, 2019 · Frontend Development

Summary of Vue Component Data Communication Methods

This article reviews various Vue.js component communication techniques—including Props, $emit/$on, Vuex, $attrs/$listeners, Provider/Inject, and $parent/$children/$refs—providing explanations, usage scenarios, and code examples to help developers choose the appropriate method for parent-child, sibling, or cross-level data exchange.

Component CommunicationPropsVue.js

0 likes · 12 min read

Summary of Vue Component Data Communication Methods

Qunar Tech Salon

Jan 23, 2019 · Frontend Development

Understanding How Vuex State and Getters Are Mapped to Components and Updated Automatically

This article explains the internal mechanism of Vuex by analyzing how state and getter values are injected into Vue components, how they stay reactive through Vue's data system, and how a central event bus can be used for component communication, providing code examples and source‑code analysis.

Component CommunicationStateVuex

0 likes · 9 min read

Understanding How Vuex State and Getters Are Mapped to Components and Updated Automatically

UC Tech Team

Nov 8, 2018 · Frontend Development

React vs Vue: Building the Same ToDo App – Key Differences Explained

This article walks through building an identical ToDo application with React and Vue, comparing their project structures, data mutation mechanisms, component communication, event handling, and code examples, helping developers understand the practical differences between the two popular frontend frameworks.

Component CommunicationReactToDo App

0 likes · 12 min read

React vs Vue: Building the Same ToDo App – Key Differences Explained