invoking a method of the grandparent from within the grandchild component

Question

invoking a method of the grandparent from within the grandchild component

My components are nested three levels deep:

<GrandParent />
   <Parent />
       <Child />

In the Child component, I have a button that, when double clicked, should call a function in the GrandParent component.

 <button @dblclick="this.$parent.callGrandParentFunction(model)"> Call Grandparent </button>

Using this.$parent, I can only access methods from the Parent component. Is there a way to go up one level higher and call a method from the GrandParent component?

There is a similar question on SO but it's related to vue2.

VueJS Grandchild component call function in Great grandparent component

javascript vue.js vuejs3

Answer 1

Answer №1

Utilize the provide/inject design pattern for better code organization:

Ancestor :

export default {
  methods: {
      someFunction(){
       //
      }
  },
  provide() {
    // using function syntax to access `this`
    return {
      someFunction: this.someFunction
    }
  }
}

In Descendant component :

export default {
  inject: ['someFunction'],
  created() {
    //execute the method 
    this.someFunction()
  }
}

Answer 2

Utilize the provide/inject design pattern for better code organization:

Ancestor :

export default {
  methods: {
      someFunction(){
       //
      }
  },
  provide() {
    // using function syntax to access `this`
    return {
      someFunction: this.someFunction
    }
  }
}

In Descendant component :

export default {
  inject: ['someFunction'],
  created() {
    //execute the method 
    this.someFunction()
  }
}

invoking a method of the grandparent from within the grandchild component

Answer №1

Similar questions

Matching Tables with JavaScript and JSON

The continuous resizing of the window is triggering a loop in flexslider when the resize function is called

Alert popup onclick feature is malfunctioning

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

A comprehensive guide to leveraging synchronous execution of setTimeout in JavaScript

Create a timer that plays music when a button is pressed

Tips for moving a polygon while dragging a marker within its boundaries

Exploring the world of Django: Using model formsets with the power

Adding Angular dependencies through Gulp (with the help of Browserify)

My program contains redundant sections that are being repeated multiple times, and I am unsure of how to remedy this issue

Tips for automatically displaying the first option as selected in an HTML Select dropdown

Exploring the world of JSON and JavaScript data structures

Understanding how to effectively conduct unit tests on the 'resolve' property within an Angular-UI Bootstrap Modal component is essential for ensuring the functionality and

Pass the selected ID from a Vue.js select component to an Axios post request and then render another select

A step-by-step guide on implementing one-way drag functionality in two lists using Vue.js

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Divergences in Vue.js

What is the best way to iterate over an array of objects?

The index.html file is failing to load/render when using app.js

Guide on uploading files with VueJS and Laravel 5.3