Invoke a parent method from a nested child component in Vue

Question

Invoke a parent method from a nested child component in Vue

After setting up a project with vue-cli using the webpack template, I decided to incorporate a reusable bootstrap modal dialog in the App component. To achieve this, I created a method called showMessage in the App component that handles displaying the modal.

With the requirement of being able to access this method from any component in mind, I started exploring different ways to call it. One approach I came across was shown below:

this.$root.$children[0].showMessage('Message', `An email will be sent to ${this.form.email}`)

javascript vue.js vue-cli

Answer 1

Answer №1

Dealing with global messaging in a delicate manner is crucial.

To ensure proper handling, consider setting up an event listener on the root component from within the modal component:

methods: {
  showMessage(message) {
    // your code to display the message
  }
},
created() {
  this.$root.$on('showMessage', this.showMessage)
},
destroyed() {
  this.$root.$off('showMessage', this.showMessage)
}

You can then use

this.$root.$emit('showMessage', 'foo message')

to show a message from anywhere within the root component's scope.

Alternatively, you could create an event bus:

Vue.prototype.$bus = new Vue();

methods: {
  showMessage(message) {
    // your code to display the message
  }
},
created() {
  this.$bus.$on('showMessage', this.showMessage)
},
destroyed() {
  this.$bus.$off('showMessage', this.showMessage)
}

this.$bus.$emit('showMessage', 'foo message')

This approach offers a slightly improved separation of concerns.

Answer 2

Dealing with global messaging in a delicate manner is crucial.

To ensure proper handling, consider setting up an event listener on the root component from within the modal component:

methods: {
  showMessage(message) {
    // your code to display the message
  }
},
created() {
  this.$root.$on('showMessage', this.showMessage)
},
destroyed() {
  this.$root.$off('showMessage', this.showMessage)
}

You can then use

this.$root.$emit('showMessage', 'foo message')

to show a message from anywhere within the root component's scope.

Alternatively, you could create an event bus:

Vue.prototype.$bus = new Vue();

methods: {
  showMessage(message) {
    // your code to display the message
  }
},
created() {
  this.$bus.$on('showMessage', this.showMessage)
},
destroyed() {
  this.$bus.$off('showMessage', this.showMessage)
}

this.$bus.$emit('showMessage', 'foo message')

This approach offers a slightly improved separation of concerns.

Invoke a parent method from a nested child component in Vue

Answer №1

Similar questions

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

Adding elements to a JSON array in Javascript

Select2.js Dropdown List with Case Sensitivity

Troubleshooting event binding problems with jQuery

Updating the background color using typescript

Extension: What is the best way to leverage data obtained from an ajax request in order to dynamically modify an already existing element within

When using Mongoose with Ejs, I am unable to view the comment I made when I navigate back to the post using GET. The comment only becomes visible after I have submitted it

An issue has occurred: TypeError - It is impossible to access the 'forEach' property of an undefined object

Tips on deleting CSS comments from a CSS file

Node.js Express not inserting data with Mongoose when using form data

Easily fetching data with AJAX through jQuery

What is the best way to include default text in my HTML input text field?

deliver a promise with a function's value

The issue of `Console.log` displaying as undefined arises after subscribing to a provider in Ionic3

What is the best way to determine if a radio button has been chosen, and proceed to the next radio button to display varied information?

strategies for chaining together multiple observables with varying data types and operations

The AngularJS HTTP interceptor is a crucial component for handling

Passing props from pages to components in NextJS: A guide

Why doesn't express.js throw an error when the variable 'app' is used within its own definition?

Locate and substitute `?php` and `?` in a given string