VueJS 2 : Watch method trigger in a component

Question

I'm working on VueJS2 with 2 components.

Desired behaviour: Each time a method is triggered in one component, i would like to trigger a method in the other component.

I assume watch and $refs are what I need. this is what it looks like :

 watch: {
    'this.$refs.component1.method1': () => {
        console.log('TRIGGERED method1')
        this.$refs.component2.method1()
    },
    'this.$refs.component1.method2': () => {
    console.log('TRIGGERED metdod2')
    this.$refs.component2.method2()
  }

Unfortunately, this doesn't work. Is it possible to watch a method call?

tony19 · Accepted Answer · 2022-07-15 05:52:14Z

1

Typically watchers and refs are not used in this scenario. What you can use depends a bit how the components are organized. If you want to watch a method from child to parent you can simply listen to a custom event in the component. That way you would emit the event from the component using $emit(customevent). You can then add the listener in the parent component using @customevent="yourMethod".

The vue docs explain that very nicely:

https://v2.vuejs.org/v2/guide/components-custom-events.html

When they do not have a parent child relationship the event bus is what you need. This typically means that you create a .js file called eventbus.js or something like that containing this:

import Vue from 'vue';
export const EventBus = new Vue();

You can then import your eventbus.js in every component where you want to exchange events and then emit events to the global evenbus like this:

import { EventBus } from './event-bus.js';

export default {
    methods: {
        EmitmyMethod () {
            EventBus.$emit('customevent') 
        },
        ListenToMyMethod () {
            EventBus.$on('customevent')
        }
    }
}

More info about that here:

https://alligator.io/vuejs/global-event-bus/

edited Jul 15, 2022 at 5:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 11, 2018 at 8:43

Imre_G

2,5251 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M.A.L. Over a year ago

Thanks a lot for your answer, I have another question then, is it be possible to watch for data change in a component using refs? Could you tell me if something like this would work? watch: { 'this.$refs.component1.dataFromComponent1': () => { console.log('Data modified!') } }

M.A.L. Over a year ago

After trying, it doesnt seem to work. Not sure if i'm using it the right way though

Imre_G Over a year ago

Watchers are part of the Vue framework but very seldom needed. Watchers do not work across components. Passing information between components should always happen via props or events. With the simplest form being props/events, a more complicated form the eventbus and the most complex form by implementing Vuex.

Collectives™ on Stack Overflow

VueJS 2 : Watch method trigger in a component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related