Vue3 - Implementing a seamless communication channel between two child components

Question

Vue3 - Implementing a seamless communication channel between two child components

Vue 3 has brought about changes in my component structure, as shown below:

In this setup, ChildA can communicate with ChildB and requires ChildB to update its state accordingly.

In Vue 2, I could send an event from ChildA:

this.$root.$emit('new-message', data)

And then handle it in ChildB:

this.$root.$on('new-message', (data) => {
   this.state = data
})

However, in Vue 3, the methods $on, $once, and $off have been removed. How can I establish this communication in Vue 3?

javascript vue.js event-handling vuejs3

Answer 1

Answer №1

Utilizing a data attribute, referred to as data in this specific example, allows for the creation of a basic store using reactive. This store can then be imported and utilized by sibling components (Component A and B).

// store.js
import { reactive } from 'vue'

export const store = reactive({
  data: 'New Message',
  setData(something) {
    this.data = something;
  },
})

<!-- ComponentA.vue -->
<script>
import { store } from './store.js'

export default {
  data() {
    return {
      store
    }
  }
}
</script>

<template>From A: {{ store.data }}</template>

Additionally,

<!-- ComponentB.vue -->
<script>
import { store } from './store.js'

export default {
  data() {
    return {
      store
    }
  },
  watch: {
    // To trigger an event upon change:
    'store.data'(newData, oldData) {
      console.log('Data Changed', { newData, oldData });
    }
  },
}
</script>

<template>From B: {{ store.data }}</template>

Updates to the state within the store will automatically propagate to all child components that utilize it. This method provides a simpler alternative to Vue 2's $emit approach, eliminating the need to manually trace events throughout the component hierarchy.

Answer 2

Utilizing a data attribute, referred to as data in this specific example, allows for the creation of a basic store using reactive. This store can then be imported and utilized by sibling components (Component A and B).

// store.js
import { reactive } from 'vue'

export const store = reactive({
  data: 'New Message',
  setData(something) {
    this.data = something;
  },
})

<!-- ComponentA.vue -->
<script>
import { store } from './store.js'

export default {
  data() {
    return {
      store
    }
  }
}
</script>

<template>From A: {{ store.data }}</template>

Additionally,

<!-- ComponentB.vue -->
<script>
import { store } from './store.js'

export default {
  data() {
    return {
      store
    }
  },
  watch: {
    // To trigger an event upon change:
    'store.data'(newData, oldData) {
      console.log('Data Changed', { newData, oldData });
    }
  },
}
</script>

<template>From B: {{ store.data }}</template>

Updates to the state within the store will automatically propagate to all child components that utilize it. This method provides a simpler alternative to Vue 2's $emit approach, eliminating the need to manually trace events throughout the component hierarchy.

Vue3 - Implementing a seamless communication channel between two child components

Answer №1

Similar questions

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

Error: Unable to locate module: 'material-ui/styles/colors'

Mastering form reset functionality using jquery

AngularJS mobile navigation menu toggle not functioning properly with the close feature

What is the rationale behind having getters and mutations accept state, while actions accept context as their first argument in VUEX

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

Removing an item from a dropdown list in Vue without triggering the change event of the dropdown's event

Performing an AJAX GET request to the API after a set time interval

Encountering 404 errors when reloading routes on an Angular Azure static web app

Stop the click event from firing on child elements of a parent element that is currently being dragged

What is the best way to eliminate a vertical line from the canvas in react-chartjs-2?

Utilizing NodeJS and Express to enhance the client side for showcasing an uploaded file

"Authentic JavaScript Universal Time Coordinated (UTC) Date

Having trouble with the clip-path in d3.js liquid fill gauge

Updating a data value in Vue3 also updates the corresponding prop

What is the correct way to properly deploy Nuxt.js in SPA mode on a server?

Ways to invoke a prop function from the setup method in Vue 3

Creating a JSON-based verification system for a login page

Error: The value of 'v4' property is not defined and cannot be read

Implementing CodeIgniter's HMVC structure to dynamically update data using AJAX functionality