Watch on parent method Vuejs

Question

I want to do something like this (it's inside a watcher property) :

        this: {
            $parent: {
                $parent: {
                    resizedEvent() {
                        console.log('Test')
                    }
                }
            }
        }

I tried to put some 'deep' property inside them like that :

        this: {
            $parent: {
                $parent: {
                    resizedEvent() {
                        console.log('Test')
                    }
                }, deep: true
            }, deep: true
        }, deep: true

My goal is to reach a method called resizedEvent which can be called like that in code :

this.$parent.$parent.resizedEvent()

How can I watch on this method?

Thanks

Answer 1

If your question is understood correctly, you're trying to reach a method when something happens. Either in a child component or somewhere else in a "component far far away"? It would be better if you provided some more context to your problem. Anyway;

In short, with parent <-> child relationships there is a golden rule :

• Parent send props to their children
• Children emit events to their parent

"it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface"

In general when you're nesting yourself deep into wild component territory, especially when two components that are not related need to exchange info, there are only two things you should consider: Event bus and Flux data management .

They both help you combat application spagetti and keeps both co-workers' and your own sanity in check.

Event bus

A global event bus allows you to avoid cases like these. Whenever something happens somewhere in your app that something else needs to listen to, they can $emit events and then listen to their respective $on returns.

Like so: In your main entry point of your application (usually something like main.js):

Vue.prototype.bus = new Vue()

This allows for accessing this.bus in your components. It then follows that whenever there is a message that needs to be sent across, you can perform something similar like this:

In a component deep down

created () { this.bus.$emit('component-created', true) }

Some other component that relies on this information

created () { this.bus.$on('component-created', (data) => { // Do something with this information })

Please note though: too much of anything contradicts its use. Sending messages all over the place makes it hard for others (and even yourself) to know what messages go where and how they all tie together. If you find yourself relying on $emit and $on too much, flux state management is the way to go.

Flux data management

Flux data management allows for storing application wide data so it's accessible throughout your application in a manner that's logical and , most importantly, trackable. In VueJS that job is handled by the excellent Vuex . It allows for time travel, persistent storage and much more.

Migrate common functionality to a library

Another alternative, depending on what you're actually trying to do (which, at the time of writing still is a bit unclear) is to scope out methods like these into an API that can be imported by the components that needs it.

In each component that needs it, you can then do something like:

import api from '@/libraries/api'

and then access all your functional niceness through, for example: api.resize() .

Both you and others that work with on the project later on will thank you.

Further reading

• State management patterns with Vuex: https://vuex.vuejs.org/en/intro.html
• Global event bus: https://alligator.io/vuejs/global-event-bus/