Using Vue.js: Invoking a Function from a Different Component

Question

Here is the HTML snippet from Component1

 <component2></component2>

This is the <script> block from Component1

export default {
 
  methods: {
    fetchData()
    {
    ...
    }
 }
}

Now, I want to call the method fetchData() in Component2

Here is the <script> block from component2

 export default {
     ...
    }

I have tried using: this.$root.$refs.c1= this; ... this.$root.$refs.c1.fetchData()

I also attempted to set up an event, but unfortunately, nothing seemed to work as expected.

Answer 1

Answer №1

To pass data between Component1 and Component2, you can use the emit method to trigger a fetchData function on Component1:

<component2 @fetch="fetchData()"></component2>

In Component2, make sure to emit the 'fetch' event at an appropriate moment, like during the created lifecycle hook:

export default {
    created() {
        this.$emit('fetch')
    }
}

Answer 2

To pass data between Component1 and Component2, you can use the emit method to trigger a fetchData function on Component1:

<component2 @fetch="fetchData()"></component2>

In Component2, make sure to emit the 'fetch' event at an appropriate moment, like during the created lifecycle hook:

export default {
    created() {
        this.$emit('fetch')
    }
}

Answer 3

Make sure the template inside Component2 is as follows:

 <component2 ref="childComp"></component2>

This is how your fetchData method in Component1 should be structured:

export default {
  methods: {
    fetchData() {
      return this.$refs.childComp.fetchData();
    }
  }
}

Answer 4

Make sure the template inside Component2 is as follows:

 <component2 ref="childComp"></component2>

This is how your fetchData method in Component1 should be structured:

export default {
  methods: {
    fetchData() {
      return this.$refs.childComp.fetchData();
    }
  }
}