Vue.js 101 : Vue.js v-on Demo: Establishing Smooth Communication between Parent and Child Components

Screenshot from the tutorial

Vue.js 101: Mastering Communication between Parent and Child Components with v-on

Vue.js is a progressive JavaScript framework that has gained immense popularity for building user interfaces and single-page applications. One of its powerful features is the ability to establish communication between components. In this blog post, we'll explore how to use the v-on directive to facilitate smooth communication between parent and child components in Vue.js.

Understanding Parent and Child Components

In Vue.js, components can be nested within each other, creating a parent-child relationship. The parent component can pass data to the child component through props, while the child component can communicate back to the parent using events. This is where the v-on directive comes into play.

What is v-on?

The v-on directive is used to listen for DOM events and execute some JavaScript when they're triggered. In the context of parent-child communication, it can be used to listen for custom events emitted by a child component.

Setting Up the Example

To illustrate how v-on works for communication between components, we will create a simple Vue application with a parent component and a child component.

Step 1: Create the Parent Component

First, let's create a parent component that will hold our child component. In this example, we'll name it ParentComponent.vue.

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>Message from Child: {{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      childMessage: '',
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    },
  },
};
</script>

Step 2: Create the Child Component

Now, let's create the child component, ChildComponent.vue, which will emit an event to the parent component.

<template>
  <div>
    <h2>Child Component</h2>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

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

How It Works

1. Parent Component (ParentComponent.vue):

   • The parent component imports the child component and registers it.
   • It listens for the childEvent emitted by the child component using the @childEvent directive.
   • When the event is caught, the handleChildEvent method is invoked, updating the childMessage data property.

2. Child Component (ChildComponent.vue):

   • This component contains a button that, when clicked, triggers the sendMessage method.
   • Inside this method, the $emit function sends an event called childEvent to the parent, along with a message.

Running the Application

To run this application, ensure you have Vue CLI installed, and then create a new project:

vue create vue-communication-demo
cd vue-communication-demo

After setting up your project, replace the contents of src/components/ParentComponent.vue and src/components/ChildComponent.vue with the code snippets provided above.

Finally, include the ParentComponent in your App.vue:

<template>
  <div id="app">
    <ParentComponent />
  </div>
</template>

<script>
import ParentComponent from './components/ParentComponent.vue';

export default {
  components: {
    ParentComponent,
  },
};
</script>

Conclusion

In this tutorial, we explored how to establish smooth communication between parent and child components in Vue.js using the v-on directive. By emitting events from child components and listening for them in parent components, you can create dynamic and interactive applications.

Understanding this component communication will enhance your ability to build complex Vue applications effectively. Keep experimenting with different scenarios to deepen your understanding. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios