React vs Vue: Passing Functions to Child Components vs Emitting Events

Introduction:

React and Vue are two popular JavaScript frameworks for building user interfaces. One of the key differences between these frameworks is the way they handle communication between parent and child components. In this post, we'll explore two approaches: passing functions from parent to child components in React, and emitting events from child to parent components in Vue.

React Approach:

In React, data flows from parent components to child components through props. If a parent component wants to pass a function to a child component, it can do so by defining the function in the parent component and passing it down to the child component as a prop. The child component can then use this function as an event handler for user interactions.

While this approach is simple and straightforward, it can lead to a tight coupling between parent and child components. If the child component needs to access a different function or piece of data from the parent component, the parent component may need to be modified. This can make the code harder to maintain and extend.
For example:

/** Parent1 */
const Parent1 = () => {
    const doSomething = () => {}
    return <ReusableComponent doSomething={doSomething} />
}

/** Parent2 */
const Parent2 = () => {
    const doSomethingElse = () => {}
    return <ReusableComponent doSomething={doSomethingElse} />
}

Vue Approach:

In Vue, child components are designed to be more independent, and they communicate with parent components through events. If a child component wants to notify a parent component of an event, it can emit a custom event with a payload. The parent component can then listen for this event and respond accordingly.
For example

/** Parent1 */
<script setup>
function doSomething() {}
</script>
<template>
    <ReusableComponent @on-sth-happen="doSomething" />
</template>

/** Parent2 */
<script setup>
function doSomethingElse() {}
</script>
<template>
    <ReusableComponent @on-sth-happen="doSomethingElse" />
</template>

This approach promotes a separation of concerns between parent and child components, making it easier to maintain and extend the codebase. It also allows child components to be reused in different contexts without having to modify the parent components.

Conclusion:

Both React and Vue provide powerful and flexible ways to build user interfaces, and the choice of framework largely depends on the specific needs of your project. However, when it comes to communication between parent and child components, Vue's event-driven architecture provides a more modular and scalable approach, while React's prop-passing approach may lead to tighter coupling between components.

Both React or Vue are able to deliver same thing. But what I want to highlight here is about the flavor of using event-driven approach here making code looks cleaner more reasonable.

The Vue's way always make sure Child components are not coupling to the parent in a way calling parent methods where React's way allowed that to happened.

It's worth to note that event naming convention in Vue is important because it's quite easy to make naming mistake for forks coming from React world. But the design intension is clearly different, Vue is more close to the way native HTML tag communicate and React is a bit weird where it allows child component calling parent methods via props.

Let me know your thoughts on this!