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

What could be causing the Gruntfile to throw an error?

The error encountered in the Node crud app states that the function console.log is not recognized as a

Issue encountered while trying to render an item from a state array in React

Puppeteer: Interacting with login dialog box fields

Encountering problems with ajax technology

The blinking cursor in Google Docs is known as "kix-cursor-caret."

The random string generator is selecting a unique string for both the server and client side

Navigate to a precise point in a video using react hooks in videojs

"Submit form data without reloading the page using the $_

The use of script src with vue.js is causing issues

Initiating change notification when utilizing service communication

Is it possible to conceal or disregard text elements from the web browser search function by using CTRL+F?

Retrieve information according to the currency specified

Failed Azure Pipeline due to the absence of the vueapp.key file during the npm run build process

In ES6, instantiate a fresh new instance of this

Tips for making a horizontal grid layout with three items in each row

Is it okay to incorporate this code into the existing plugin?

At which location within the script should I insert the document.title in order to update the title every xx milliseconds?

Verify whether the element has been clicked prior to deletion

Using Sequelize to send data from the client-side to the server-side